!1 Vue 获取权限动态添加路由

Merge pull request !1 from lisgroup/develop

Author: lisgroup

admin/src/permission.js

@@ -1,10 +1,14 @@
 import router from './router'
+import { routeSuper, routerAdmin } from './router/router'
 import store from './store'
 import NProgress from 'nprogress' // Progress 进度条
 import 'nprogress/nprogress.css'// Progress 进度条样式
 import { Message } from 'element-ui'
 import { getToken } from '@/utils/auth' // 验权
 
+console.log(router)
+router.addRoutes(routerAdmin)
+router.addRoutes(routeSuper)
 const whiteList = ['/login', '/index', '/line', '/home', '/404', '/', '', '/md'] // 不重定向白名单
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -15,15 +19,17 @@ router.beforeEach((to, from, next) => {
     } else {
       if (store.getters.roles.length === 0) {
         store.dispatch('GetInfo').then(res => { // 拉取用户信息
-          if (!to.meta.role || res.data.roles.indexOf('Super Administrator') >= 0 || res.data.roles.indexOf(to.meta.role) >= 0) {
+          const roles = res.data.roles
+          console.log(roles)
+          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
+            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+          })
+          if (!to.meta.role || whiteList.indexOf(to.path) !== -1 || hasPermission(res.data.roles, to.meta.roles)) {
             next()
           } else {
-            if (whiteList.indexOf(to.path) !== -1) {
-              next()
-            } else {
-              next({ path: '/404' })
-              NProgress.done()
-            }
+            next({ path: '/404' })
+            NProgress.done()
           }
         }).catch((err) => {
           store.dispatch('FedLogOut').then(() => {
@@ -32,15 +38,12 @@ router.beforeEach((to, from, next) => {
           })
         })
       } else {
-        if (!to.meta.role || store.getters.roles.indexOf('Super Administrator') >= 0 || store.getters.roles.indexOf(to.meta.role) >= 0) {
+        // 动态改变权限
+        if (!to.meta.role || whiteList.indexOf(to.path) !== -1 || hasPermission(store.getters.roles, to.meta.roles)) {
           next()
         } else {
-          if (whiteList.indexOf(to.path) !== -1) {
-            next()
-          } else {
-            next({ path: '/404' })
-            NProgress.done()
-          }
+          next({ path: '/404' })
+          NProgress.done()
         }
       }
     }
@@ -57,3 +60,10 @@ router.beforeEach((to, from, next) => {
 router.afterEach(() => {
   NProgress.done() // 结束Progress
 })
+
+// permissiom judge function
+function hasPermission(roles, permissionRoles) {
+  if (roles.indexOf('Super Administrator') >= 0) return true // admin permission passed directly
+  if (!permissionRoles) return true
+  return roles.some(role => permissionRoles.indexOf(role) >= 0)
+}

admin/src/router/index.js

@@ -21,8 +21,6 @@ const Layout = () => import('../views/layout/Layout')
     icon: 'svg-name'             the icon show in the sidebar,
   }
  **/
-const Super = 'Super Administrator'
-const Admin = 'Admin'
 
 // 基础路由
 const routeBase = [
@@ -48,180 +46,7 @@ const routeBase = [
   }
 ]
 
-// 管理一般路由
-const routeManage = [
-  {
-    path: '/api_excel',
-    component: Layout,
-    redirect: '/api_excel/index',
-    name: 'Excel-List',
-    meta: { title: '批量测试管理', icon: 'ico-table', role: Admin },
-    children: [
-      { path: '/api_excel/edit/:id', name: 'EditExcel', component: () => import('@/views/api_excel/edit'), hidden: true },
-      {
-        path: '/api_excel/add',
-        name: 'AddExcel',
-        component: () => import('@/views/api_excel/add'),
-        meta: { title: '上传测试', icon: 'excel', role: Admin }
-      },
-      {
-        path: '/api_excel/index',
-        name: 'Excel',
-        component: () => import('@/views/api_excel/index'),
-        meta: { title: '测试管理', icon: 'ico-aliyun', role: Admin }
-      },
-      { path: '/api_param/add', name: 'AddApiParam', component: () => import('@/views/api_param/add'), hidden: true },
-      { path: '/api_param/edit/:id', name: 'EditApiParam', component: () => import('@/views/api_param/edit'), hidden: true },
-      {
-        path: '/api_param/index',
-        name: 'ApiParam',
-        component: () => import('@/views/api_param/index'),
-        meta: { title: '接口列表', icon: 'api', role: Admin }
-      }
-    ]
-  }
-]
-
-const routerAdmin = [
-  // { path: '/', redirect: '/index', hidden: true },
-
-  {
-    path: '/category',
-    component: Layout,
-    redirect: '/category/index',
-    name: 'Category-Nav',
-    meta: { title: '栏目菜单', icon: 'category', role: Super },
-    children: [
-      { path: '/category/add', name: 'AddCategory', component: () => import('@/views/category/add'), meta: { title: '添加栏目' }, hidden: true },
-      { path: '/category/edit/:id', name: 'EditCategory', component: () => import('@/views/category/edit'), hidden: true },
-      {
-        path: '/category/index',
-        name: 'Category',
-        component: () => import('@/views/category/index'),
-        meta: { title: '栏目管理', icon: 'ico-category', role: Super }
-      },
-      { path: '/nav/add', name: 'AddNav', component: () => import('@/views/nav/add'), hidden: true },
-      { path: '/nav/edit/:id', name: 'EditNav', component: () => import('@/views/nav/edit'), hidden: true },
-      {
-        path: '/nav',
-        name: 'Nav',
-        component: () => import('@/views/nav'),
-        meta: { title: '导航管理', icon: 'nav', role: Super }
-      },
-      { path: '/tag/add', name: 'AddTag', component: () => import('@/views/tag/add'), meta: { title: '添加标签' }, hidden: true },
-      { path: '/tag/edit/:id', name: 'EditTag', component: () => import('@/views/tag/edit'), hidden: true },
-      {
-        path: '/tag',
-        name: 'Tag',
-        component: () => import('@/views/tag/index'),
-        meta: { title: '标签列表', icon: 'tag', role: Super }
-      }
-    ]
-  },
-
-  {
-    path: '/article',
-    component: Layout,
-    // redirect: '/article',
-    name: 'Article-List',
-    meta: { title: '文章管理', icon: 'article', role: Super },
-    children: [
-      { path: '/article/edit/:id', name: 'EditArticle', component: () => import('@/views/article/edit'), hidden: true },
-      {
-        path: '/article/index',
-        name: 'Article',
-        component: () => import('@/views/article/index'),
-        meta: { title: '文章管理', icon: 'ico-article', role: Super }
-      },
-      {
-        path: '/article/add',
-        name: 'AddArticle',
-        component: () => import('@/views/article/add'),
-        meta: { title: '添加文章', icon: 'add', role: Super }
-      }
-    ]
-  },
-
-  {
-    path: '/list',
-    component: Layout,
-    redirect: '/task',
-    name: '公交',
-    meta: { title: '公交管理', icon: 'bus', role: Super },
-    children: [
-      { path: '/task/search', name: 'search', component: () => import('@/views/task/search'), hidden: true },
-      { path: '/task/newBus', name: 'NewBus', component: () => import('@/views/task/newBus'), hidden: true },
-      { path: '/task/edit/:id', name: 'taskEdit', component: () => import('@/views/task/edit'), hidden: true },
-      {
-        path: '/task',
-        name: '定时任务',
-        component: () => import('@/views/task/index'),
-        meta: { title: '定时任务', icon: 'task', role: Super }
-      },
-      { path: 'lines/add', name: 'linesAdd', component: () => import('@/views/lines/add'), hidden: true },
-      { path: 'lines/edit/:id', name: 'linesEdit', component: () => import('@/views/lines/edit'), hidden: true },
-      {
-        path: 'lines',
-        name: '公交列表',
-        component: () => import('@/views/lines/index'),
-        meta: { title: '公交列表', icon: 'table', role: Super }
-      },
-      {
-        path: 'config',
-        name: '配置管理',
-        component: () => import('@/views/lines/index'),
-        meta: { title: '配置列表', icon: 'table', role: Super }
-      },
-      {
-        path: 'tree',
-        name: 'Tree',
-        component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree', role: Super },
-        hidden: true
-      }
-    ]
-  },
-
-  {
-    path: 'user',
-    component: Layout,
-    redirect: '/user',
-    name: '权限',
-    meta: { title: '权限管理', icon: 'auth', role: Super },
-    children: [
-      { path: 'index', name: 'userIndex', component: () => import('@/views/user/index'), hidden: true },
-      { path: 'password', name: 'userPassword', component: () => import('@/views/user/password'), hidden: true },
-      { path: '/user/add', name: 'AddUser', component: () => import('@/views/user/add'), hidden: true },
-      { path: '/user/edit/:id', name: 'EditUser', component: () => import('@/views/user/edit'), hidden: true },
-      {
-        path: '/user',
-        name: '用户管理',
-        component: () => import('@/views/user/index'),
-        meta: { title: '用户列表', icon: 'user', role: Super }
-      },
-      { path: '/permission/add', name: 'AddPermission', component: () => import('@/views/permission/add'), hidden: true },
-      { path: '/permission/edit/:id', name: 'EditPermission', component: () => import('@/views/permission/edit'), hidden: true },
-      {
-        path: '/permission',
-        name: '权限列表',
-        component: () => import('@/views/permission/index'),
-        meta: { title: '权限列表', icon: 'permission', role: Super }
-      },
-
-      { path: '/role/add', name: 'AddRole', component: () => import('@/views/role/add'), hidden: true },
-      { path: '/role/edit/:id', name: 'EditRole', component: () => import('@/views/role/edit'), hidden: true },
-      {
-        path: '/role',
-        name: '角色管理',
-        component: () => import('@/views/role/index'),
-        meta: { title: '角色管理', icon: 'role', role: Super }
-      }
-    ]
-  }
-
-]
-
-const routeOther = [
+const routeTest = [
   {
     path: '/form',
     component: Layout,
@@ -294,7 +119,7 @@ const routeOther = [
   { path: '*', redirect: '/404', hidden: true }
 ]
 
-export const constantRouterMap = [...routeBase, ...routeManage, ...routerAdmin, ...routeOther]
+export const constantRouterMap = [...routeBase, ...routeTest]
 
 export default new Router({
   // mode: 'history', //后端支持可开