feat(permission): add real-time routes filter

Real-time routes filter is used to filter common routes which needs to
filter user access

Author: lbwa

src/permission/create-routes.js …ission/__roles_filter__/create-routes.jssrc/permission/create-routes.js renamed to src/permission/__roles_filter__/create-routes.js src/permission/create-routes.js renamed to src/permission/__roles_filter__/create-routes.js

@@ -5,7 +5,7 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { tokenFromStorage, userInfoFromStorage } from 'UTILS/storage'
 import { MessageBox } from 'element-ui'
-import createDynamicRoutes from '../create-routes'
+import createDynamicRoutes from './create-routes'
 import constantRoutes from 'ROUTER/routes/constant'
 
 NProgress.configure({ showSpinner: false })

src/permission/__roles_filter__/index.js

@@ -47,7 +47,7 @@ function filterRoutes (routes, accessMap) {
  * @param {Array} accessMap 一个对应当前用户各个模块权限的 hashmap
  */
 // ! 本质问题: 如何确定两个数组是否存在交集
-function validateAccess (route, accessMap) {
+export function validateAccess (route, accessMap) {
   if (route.meta && route.meta.access) {
     return Object.keys(route.meta.access).every(accessName => {
       // 在后端回传的权限表中不存在对应 route 所需的最低权限中的一项，

src/permission/filter-routes.js

@@ -6,7 +6,7 @@ import 'nprogress/nprogress.css'
 import { tokenFromStorage, userInfoFromStorage } from 'UTILS/storage'
 import { MessageBox } from 'element-ui'
 // import createDynamicRoutes from './create-routes'
-import createDynamicRoutes from './filter-routes'
+import createDynamicRoutes, { validateAccess } from './filter-routes'
 import constantRoutes from 'ROUTER/routes/constant'
 
 NProgress.configure({ showSpinner: false })
@@ -123,18 +123,21 @@ router.beforeEach((to, from, next) => {
       return createRoutesMap(to, next)
     }
 
-    next()
-
-    // step:  real-time routes filter
-    // ! 如有动态权限验证的需求
-    // if (!to.meta.access || validateAccess(route, to.meta.access)) {
-    //   next()
-    // } else {
-    //   next({
-    //     path: `/403?redirect=${to.path}`,
-    //     replace: true
-    //   })
-    // }
+    // Optional step:  real-time routes filter
+    // ! 动态权限验证，如在公有路由中的未参与 private routes 过滤的路由需要权限验证时
+    if (
+      // 当前路由不存在权限验证时
+      !to.meta.access ||
+      // 当前路由存在权限验证时
+      validateAccess(to, store.getters['login/accessMap'])
+    ) {
+      next()
+    } else {
+      next({
+        path: `/403?redirect=${to.path}`,
+        replace: true
+      })
+    }
   } else {
     // ! State: user logout
     next({

src/permission/index.js

@@ -1,5 +1,4 @@
 import { constantComponents, plainExport } from 'ROUTER/components'
-import permission from 'PERMISSION/roles-map'
 
 /**
  * meta: {
@@ -43,7 +42,9 @@ export default [
         component: constantComponents.pagesAdminDashboard,
         meta: {
           title: 'Dashboard',
-          roles: permission.admin.dashboard
+          access: {
+            device: ['read', 'write', 'import']
+          }
         }
       },
       {
@@ -52,7 +53,9 @@ export default [
         meta: {
           title: 'Table',
           icon: 'el-icon-tickets',
-          roles: permission.admin.table
+          access: {
+            device: ['read', 'write', 'import']
+          }
         }
       }
     ]