lims_college/frontend_web/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import store from '@/store/index'

import util from '@/libs/util.js'

// 路由数据
import routes from './routes'

// 固定菜单与路由
import menuHeader from '@/menu/header'
// import menuAside from '@/menu/aside'
import utils from '@/static/js/utils.js'
import { frameInRoutes } from '@/router/routes'
// 路由与组件映射关系
import routerMapComponents from '@/routerMapComponents'
import sidebarrouter from '@/api/sidebar'

Vue.use(VueRouter)

// 导出路由 在 main.js 里使用
const router = new VueRouter({
  routes
})

let permissionMenu = []
let permissionRouter = []

let permission = {
  functions: [],
  roles: [],
  interfaces: [],
  isAdmin: false
}

// 标记是否已经拉取权限信息
let isFetchPermissionInfo = false

let fetchPermissionInfo = async () => {
  // 处理动态添加的路由
  const formatRoutes = function (routes) {
    routes.forEach(route => {
      route.component = routerMapComponents[route.component]
      if (route.children) {
        formatRoutes(route.children)
      }
    })
  }

  // try {
  //   let userPermissionInfo =
  //      {
  // statusCode: 200,
  // msg: '',
  // data: {
  //   user: 'MenuManager',
  //   userRoles: [
  //     'R_MENUADMIN'
  //   ],
  //   userPermissions: [
  //     'p_menu_view',
  //     'p_menu_edit',
  //     'p_menu_menu',
  //     'p_issues_edit1'
  //   ],
  //   accessMenus: [
  //     {
  //       title: '系统',
  //       path: '/system',
  //       icon: 'cogs',
  //       children: [
  //         {
  //           title: '系统设置',
  //           icon: 'cogs',
  //           children: [
  //             {
  //               title: '菜单管理',
  //               path: '/system/menu',
  //               icon: 'th-list'
  //             }
  //           ]
  //         },
  //         {
  //           title: '组织架构',
  //           icon: 'pie-chart',
  //           children: [
  //             {
  //               title: '部门管理',
  //               icon: 'html5'
  //             },
  //             {
  //               title: '职位管理',
  //               icon: 'opencart'
  //             },
  //             {
  //               title: '编辑界面演示',
  //               path: '/issues',
  //               icon: 'th-list'
  //             }
  //           ]
  //         }
  //       ]
  //     }
  //   ],
  //   accessRoutes: [
  //     {
  //       name: 'System',
  //       path: '/system',
  //       component: 'layoutHeaderAside',
  //       componentPath: 'layout/header-aside/layout',
  //       meta: {
  //         title: '系统设置',
  //         cache: true
  //       },
  //       children: [
  //         {
  //           name: 'MenuPage',
  //           path: '/system/menu',
  //           component: 'menu',
  //           componentPath: 'pages/sys/menu/index',
  //           meta: {
  //             title: '菜单管理',
  //             cache: true
  //           }
  //         },
  //         {
  //           name: 'RoutePage',
  //           path: '/system/route',
  //           component: 'route',
  //           componentPath: 'pages/sys/route/index',
  //           meta: {
  //             title: '路由管理',
  //             cache: true
  //           }
  //         },
  //         {
  //           name: 'RolePage',
  //           path: '/system/role',
  //           component: 'role',
  //           componentPath: 'pages/sys/role/index',
  //           meta: {
  //             title: '角色管理',
  //             cache: true
  //           }
  //         },
  //         {
  //           name: 'UserPage',
  //           path: '/system/user',
  //           component: 'user',
  //           componentPath: 'pages/sys/user/index',
  //           meta: {
  //             title: '用户管理',
  //             cache: true
  //           }
  //         },
  //         {
  //           name: 'InterfacePage',
  //           path: '/system/interface',
  //           component: 'interface',
  //           meta: {
  //             title: '接口管理'
  //           }
  //         },
  //         {
  //           name: 'issues',
  //           path: '/issues',
  //           component: 'issues',
  //           meta: {
  //             title: '编辑页面示例'
  //           }
  //         },
  //         {
  //           name: 'issues-edit',
  //           path: '/issues/edit/:id',
  //           component: 'issues-edit',
  //           meta: {
  //             title: '无缓存编辑'
  //           }
  //         },
  //         {
  //           name: 'issues-edit-cache-db',
  //           path: '/issues/edit-cache-db/:id',
  //           component: 'issues-edit-cache-db',
  //           meta: {
  //             title: '带缓存编辑 DB'
  //           }
  //         }
  //       ]
  //     }
  //   ],
  //   accessInterfaces: [
  //     {
  //       path: '/menu/:id',
  //       method: 'get'
  //     },
  //     {
  //       path: '/menu',
  //       method: 'get'
  //     },
  //     {
  //       path: '/menu/save',
  //       method: 'post'
  //     },
  //     {
  //       path: '/interface/paged',
  //       method: 'get'
  //     }
  //   ],
  //   isAdmin: 0,
  //   avatarUrl: 'https://api.adorable.io/avatars/85/abott@adorable.png'
  // }
  //  }
  try {
    let userPermissionInfo = {}

    // 后端需要返回的权限信息包括权限过滤后的角色编码集合，功能编码集合，接口信息集合，菜单列表，路由列表，以及是否系统管理员标识
    // 动态生成菜单
    let uuid = util.cookies.get('uuid')
    let params = {
      uuid: uuid
    }
    sidebarrouter
      .getAllbars(params)
      .then(res => {
        userPermissionInfo = res
        if (userPermissionInfo.access_menus) {
          permissionMenu = userPermissionInfo.access_menus
          permissionMenu = utils.toolfun_gettreejson(
            permissionMenu,
            'id',
            'parent_id',
            'icon,path,title'
          )
        }
        // permissionRouter = userPermissionInfo.accessRoutes
        // permission.functions = userPermissionInfo.userPermissions
        // permission.roles = userPermissionInfo.userRoles
        // permission.interfaces = util.formatInterfaces(userPermissionInfo.accessInterfaces)
        // permission.isAdmin = userPermissionInfo.isAdmin === 1

        formatRoutes(permissionRouter)
        let allMenuAside = [...permissionMenu]
        // console.log(allMenuAside, '=============')
        // let allMenuAside = [...menuAside, ...permissionMenu]
        // let allMenuHeader = [...menuHeader, ...permissionMenu]
        let allMenuHeader = [...menuHeader]
        // 动态添加路由
        router.addRoutes(permissionRouter)
        // 处理路由 得到每一级的路由设置
        store.commit('d2admin/page/init', [
          ...frameInRoutes,
          ...permissionRouter
        ])
        // 设置顶栏菜单
        store.commit('d2admin/menu/headerSet', allMenuHeader)
        // 设置侧边栏菜单
        store.commit('d2admin/menu/fullAsideSet', allMenuAside)
        // 初始化菜单搜索功能
        store.commit('d2admin/search/init', allMenuHeader)
        // 设置权限信息
        store.commit('d2admin/permission/set', permission)

        // 加载上次退出时的多页列表 DB -> store 持久化数据加载上次退出时的多页列表
        store.dispatch('d2admin/page/openedLoad')
      })
      .catch(err => {
        console.error(err)
      })
  } catch (ex) {
    console.log(ex)
  }

  await Promise.resolve()
}

/**
 * 路由拦截
 * 权限验证
 */
router.beforeEach(async (to, from, next) => {
  // 进度条
  NProgress.start()
  // 关闭搜索面板
  store.commit('d2admin/search/set', false)
  // 验证当前路由所有的匹配中是否需要有登录验证的
  if (to.matched.some(r => r.meta.auth)) {
    // 这里暂时将cookie里是否存有token作为验证是否登录的条件
    // 请根据自身业务需要修改
    const token = util.cookies.get('token')
    if (token && token !== 'undefined') {
      // 拉取权限信息
      if (!isFetchPermissionInfo) {
        await fetchPermissionInfo()
        isFetchPermissionInfo = true
        next(to.path, true)
      } else {
        next()
      }
    } else {
      // 没有登录的时候跳转到登录界面
      // 携带上登陆成功之后需要跳转的页面完整路径
      next({
        name: 'page1',
        query: {
          redirect: to.fullPath
        }
      })
      // https://github.com/d2-projects/d2-admin/issues/138
      NProgress.done()
    }
  } else {
    // 不需要身份校验 直接通过
    next()
  }
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

router.afterEach(to => {
  // 进度条
  NProgress.done()
  // 多页控制 打开新的页面
  store.dispatch('d2admin/page/open', to)
  // 更改标题
  util.title(to.meta.title)
})

export default router