权限配置

src/permission.js

@@ -27,8 +27,8 @@ router.beforeEach(async(to, from, next) => {
       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
       // determine whether the user has obtained his permission roles through getInfo
-      const hasPages = store.getters.pages && store.getters.pages.length > 0
-      if (hasPages) {
+      const isInfo = store.getters.isInfo
+      if (isInfo) {
         next()
       } else {
         try {
@@ -37,7 +37,6 @@ router.beforeEach(async(to, from, next) => {
           const { pages } = await store.dispatch('user/getInfo')
           // generate accessible routes map based on roles
           const accessRoutes = await store.dispatch('permission/generateRoutes', pages)
-
           // dynamically add accessible routes
           router.addRoutes(accessRoutes)
 

src/router/index.js

@@ -156,6 +156,21 @@ export const constantRoutes = [
       }
     ]
   },
+  // {
+  //   path: 'external-link',
+  //   component: Layout,
+  //   children: [
+  //     {
+  //       path: 'https://baidu.com',
+  //       meta: { title: '外链', icon: 'link' }
+  //     }
+  //   ]
+  // },
+
+  // 404 page must be placed at the end !!!
+  { path: '*', redirect: '/404', hidden: true }
+]
+export const asyncRoutes = [
   {
     path: '/sys',
     component: Layout,
@@ -163,6 +178,7 @@ export const constantRoutes = [
     name: 'sys',
     meta: {
       title: '系统管理',
+      // pages: ['pc:sys'],
       icon: 'el-icon-setting'
     },
     children: [
@@ -170,72 +186,40 @@ export const constantRoutes = [
         path: 'dept',
         component: () => import('@/views/sys/dept/index'), // Parent router-view
         name: 'dept',
-        meta: { title: '部门数据', icon: 'el-icon-collection-tag' }
+        meta: { title: '部门数据', pages: ['pc:sys:dept:list'], icon: 'el-icon-collection-tag' }
       },
       {
         path: 'job',
         component: () => import('@/views/sys/job/index'), // Parent router-view
         name: 'job',
-        meta: { title: '职务管理', icon: 'el-icon-collection-tag' }
+        meta: { title: '职务管理', pages: ['pc:sys:role:list'], icon: 'el-icon-collection-tag' }
       },
       {
         path: 'worker',
         component: () => import('@/views/sys/worker/index'), // Parent router-view
         name: 'worker',
-        meta: { title: '职工管理', icon: 'el-icon-collection-tag' }
+        meta: { title: '职工管理', pages: ['pc:sys:user:list'], icon: 'el-icon-collection-tag' }
       },
       {
         path: 'dict',
         component: () => import('@/views/sys/dict/index'), // Parent router-view
         name: 'dict',
-        meta: { title: '字典管理', icon: 'el-icon-collection-tag' }
+        meta: { title: '字典管理', pages: ['pc:sys:dict:list'], icon: 'el-icon-collection-tag' }
       },
       {
         path: 'menu',
         component: () => import('@/views/sys/menu/index'), // Parent router-view
         name: 'menu',
-        meta: { title: '菜单管理', icon: 'el-icon-collection-tag' }
+        meta: { title: '菜单管理', pages: ['pc:sys:menu:list'], icon: 'el-icon-collection-tag' }
       },
       {
         path: 'log',
         component: () => import('@/views/sys/log/index'), // Parent router-view
         name: 'log',
-        meta: { title: '日志管理', icon: 'el-icon-collection-tag' }
+        meta: { title: '日志管理', pages: ['pc:sys:operlog:list'], icon: 'el-icon-collection-tag' }
       }
     ]
   },
-  // {
-  //   path: 'external-link',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'https://baidu.com',
-  //       meta: { title: '外链', icon: 'link' }
-  //     }
-  //   ]
-  // },
-
-  // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
-]
-export const asyncRoutes = [
-
-  // {
-  //   path: '/form',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       name: 'Form',
-  //       component: () => import('@/views/form/index'),
-  //       meta: {
-  //         title: '权限-表单',
-  //         icon: 'form',
-  //         roles: ['admin'] // you can set roles in root nav
-  //       }
-  //     }
-  //   ]
-  // },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/store/getters.js

@@ -9,6 +9,7 @@ const getters = {
   roles: state => state.user.roles,
   pages: state => state.user.pages,
   btns: state => state.user.btns,
+  isInfo: state => state.user.isInfo,
   permission_routes: state => state.permission.routes,
   errorLogs: state => state.errorLog.logs
 }

src/store/modules/permission.js

@@ -2,12 +2,12 @@ import { asyncRoutes, constantRoutes } from '@/router'
 
 /**
  * Use meta.role to determine if the current user has permission
- * @param roles
+ * @param pages
  * @param route
  */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
+function hasPermission(pages, route) {
+  if (route.meta && route.meta.pages) {
+    return pages.some(role => route.meta.pages.includes(role))
   } else {
     return true
   }
@@ -16,16 +16,16 @@ function hasPermission(roles, route) {
 /**
  * Filter asynchronous routing tables by recursion
  * @param routes asyncRoutes
- * @param roles
+ * @param pages
  */
-export function filterAsyncRoutes(routes, roles) {
+export function filterAsyncRoutes(routes, pages) {
   const res = []
 
   routes.forEach(route => {
     const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
+    if (hasPermission(pages, tmp)) {
       if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
+        tmp.children = filterAsyncRoutes(tmp.children, pages)
       }
       res.push(tmp)
     }
@@ -47,13 +47,9 @@ const mutations = {
 }
 
 const actions = {
-  generateRoutes({ commit }, roles) {
+  generateRoutes({ commit }, pages) {
     return new Promise(resolve => {
-      // if (roles.includes('admin')) {
-      //   accessedRoutes = asyncRoutes || []
-      // } else {
-      const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      // }
+      const accessedRoutes = filterAsyncRoutes(asyncRoutes, pages)
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })

src/store/modules/user.js

@@ -7,7 +7,9 @@ const state = {
   user: {},
   roles: [],
   pages: [],
-  btns: []
+  btns: [],
+  isInfo: false
+
 }
 
 const mutations = {
@@ -25,6 +27,9 @@ const mutations = {
   },
   SET_ROLES: (state, roles) => {
     state.roles = roles
+  },
+  SET_ISINFO: (state, isInfo) => {
+    state.isInfo = isInfo
   }
 }
 
@@ -61,7 +66,7 @@ const actions = {
         commit('SET_PAGES', pages)
         commit('SET_BTNS', btns)
         commit('SET_ROLES', roles)
-
+        commit('SET_ISINFO', true)
         resolve(response)
       }).catch(error => {
         reject(error)
@@ -78,6 +83,8 @@ const actions = {
     commit('SET_PAGES', [])
     commit('SET_BTNS', [])
     commit('SET_ROLES', [])
+    commit('SET_ISINFO', false)
+
     removeToken()
     resetRouter()
 
@@ -100,6 +107,7 @@ const actions = {
       commit('SET_PAGES', [])
       commit('SET_BTNS', [])
       commit('SET_ROLES', [])
+      commit('SET_ISINFO', false)
 
       removeToken()
       resolve()

src/views/sys/dict/index.vue

@@ -56,7 +56,7 @@
       >
 
         <span slot="action" slot-scope="text, record">
-          <a-button v-permission="['pc:sys:edit:edit']" size="small" type="primary" @click="handleEdit(record)">
+          <a-button v-permission="['pc:sys:dict:edit']" size="small" type="primary" @click="handleEdit(record)">
             编辑
           </a-button>
           <a-divider type="vertical" />