fix: static-router not work. #1385

Author: sendya

src/config/router.config.js

@@ -30,11 +30,11 @@ export const asyncRouterMap = [
             meta: { title: 'menu.dashboard.analysis', keepAlive: false, permission: ['dashboard'] }
           },
           // 外部链接
-          {
-            path: 'https://www.baidu.com/',
-            name: 'Monitor',
-            meta: { title: 'menu.dashboard.monitor', target: '_blank' }
-          },
+          // {
+          //   path: 'https://www.baidu.com/',
+          //   name: 'Monitor',
+          //   meta: { title: 'menu.dashboard.monitor', target: '_blank' }
+          // },
           {
             path: '/dashboard/workplace',
             name: 'Workplace',

src/permission.js

@@ -7,7 +7,6 @@ import notification from 'ant-design-vue/es/notification'
 import { setDocumentTitle, domTitle } from '@/utils/domUtil'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { i18nRender } from '@/locales'
-import { generatorDynamicRouter } from '@/router/generator-routers'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -31,14 +30,12 @@ router.beforeEach((to, from, next) => {
         store
           .dispatch('GetInfo')
           .then(res => {
-            // generate dynamic router
-            generatorDynamicRouter(token).then(routers => {
-              store.commit('SET_ROUTERS', routers)
-
-              // 根据roles权限生成可访问的路由表
+            console.log('res', res)
+            // 根据用户权限信息生成可访问的路由表
+            store.dispatch('GenerateRoutes', { token, ...res }).then(() => {
               // 动态添加可访问路由表
               // VueRouter@3.5.0+ New API
-              resetRouter() // 重置路由 防止退出重新登录或者token过期后页面未刷新，导致的路由重复添加
+              resetRouter() // 重置路由 防止退出重新登录或者 token 过期后页面未刷新，导致的路由重复添加
               store.getters.addRouters.forEach(r => {
                 router.addRoute(r)
               })

src/router/generator-routers.js

@@ -3,7 +3,7 @@ import * as loginService from '@/api/login'
 // eslint-disable-next-line
 import { BasicLayout, BlankLayout, PageView, RouteView } from '@/layouts'
 
-// 前端路由表
+// 前端路由表 (基于动态)
 const constantRouterComponents = {
   // 基础页面 layout 必须引入
   BasicLayout: BasicLayout,
@@ -75,6 +75,10 @@ const rootRouter = {
   children: []
 }
 
+// export const generatorStaticRouter = () => {
+
+// }
+
 /**
  * 动态生成菜单
  * @param token

src/store/index.js

@@ -6,11 +6,11 @@ import user from './modules/user'
 
 // default router permission control
 // 默认路由模式为静态路由 (router.config.js)
-import permission from './modules/permission'
+// import permission from './modules/static-router'
 
 // dynamic router permission control (Experimental)
 // 动态路由模式（api请求后端生成）
-// import permission from './modules/async-router'
+import permission from './modules/async-router'
 
 import getters from './getters'
 

src/store/modules/async-router.js

@@ -2,6 +2,7 @@
  * 向后端请求用户的菜单，动态生成路由
  */
 import { constantRouterMap } from '@/config/router.config'
+import { generatorDynamicRouter } from '@/router/generator-routers'
 
 const permission = {
   state: {
@@ -13,19 +14,20 @@ const permission = {
       state.addRouters = routers
       state.routers = constantRouterMap.concat(routers)
     }
+  },
+  actions: {
+    GenerateRoutes ({ commit }, data) {
+      return new Promise((resolve, reject) => {
+        const { token } = data
+        generatorDynamicRouter(token).then(routers => {
+          commit('SET_ROUTERS', routers)
+          resolve()
+        }).catch(e => {
+          reject(e)
+        })
+      })
+    }
   }
-  // ,
-  // actions: {
-  //   GenerateRoutes({ commit }, data) {
-  //     return new Promise(resolve => {
-  //       const { token } = data
-  //       generatorDynamicRouter(token).then(routers => {
-  //         commit('SET_ROUTERS', routers)
-  //         resolve()
-  //       })
-  //     })
-  //   }
-  // }
 }
 
 export default permission

src/store/modules/permission.js renamed to src/store/modules/static-router.js

@@ -10,6 +10,10 @@ import cloneDeep from 'lodash.clonedeep'
  */
 function hasPermission (permission, route) {
   if (route.meta && route.meta.permission) {
+    console.log('hasPermission', permission)
+    if (permission === undefined) {
+      return false
+    }
     let flag = false
     for (let i = 0, len = permission.length; i < len; i++) {
       flag = route.meta.permission.includes(permission[i])
@@ -38,11 +42,11 @@ function hasRole(roles, route) {
   }
 }
 
-function filterAsyncRouter (routerMap, roles) {
+function filterAsyncRouter (routerMap, role) {
   const accessedRouters = routerMap.filter(route => {
-    if (hasPermission(roles.permissionList, route)) {
+    if (hasPermission(role.permissionList, route)) {
       if (route.children && route.children.length) {
-        route.children = filterAsyncRouter(route.children, roles)
+        route.children = filterAsyncRouter(route.children, role)
       }
       return true
     }
@@ -65,9 +69,9 @@ const permission = {
   actions: {
     GenerateRoutes ({ commit }, data) {
       return new Promise(resolve => {
-        const { roles } = data
+        const { role } = data
         const routerMap = cloneDeep(asyncRouterMap)
-        const accessedRouters = filterAsyncRouter(routerMap, roles)
+        const accessedRouters = filterAsyncRouter(routerMap, role)
         commit('SET_ROUTERS', accessedRouters)
         resolve()
       })

src/store/modules/user.js

@@ -52,29 +52,31 @@ const user = {
     // 获取用户信息
     GetInfo ({ commit }) {
       return new Promise((resolve, reject) => {
+        // 请求后端获取用户信息 /api/user/info
         getInfo().then(response => {
-          const result = response.result
-
+          const { result } = response
           if (result.role && result.role.permissions.length > 0) {
-            const role = result.role
-            role.permissions = result.role.permissions
-            role.permissions.map(per => {
-              if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
-                const action = per.actionEntitySet.map(action => { return action.action })
-                per.actionList = action
-              }
+            const role = { ...result.role }
+            role.permissions = result.role.permissions.map(permission => {
+              const per = {
+                ...permission,
+                actionList: (permission.actionEntitySet || {}).map(item => item.action)
+               }
+              return per
             })
             role.permissionList = role.permissions.map(permission => { return permission.permissionId })
-            commit('SET_ROLES', result.role)
+            // 覆盖响应体的 role, 供下游使用
+            result.role = role
+
+            commit('SET_ROLES', role)
             commit('SET_INFO', result)
+            commit('SET_NAME', { name: result.name, welcome: welcome() })
+            commit('SET_AVATAR', result.avatar)
+            // 下游
+            resolve(result)
           } else {
             reject(new Error('getInfo: roles must be a non-null array !'))
           }
-
-          commit('SET_NAME', { name: result.name, welcome: welcome() })
-          commit('SET_AVATAR', result.avatar)
-
-          resolve(response)
         }).catch(error => {
           reject(error)
         })