路由表交回前端存储。

src/api/system/role.js

@@ -31,25 +31,19 @@ export function GetRoleDetail(id){
       })
 }
 
-export function AddRole(Role,MenuList){
+export function AddRole(data){
     return fetch({
         url: '/role/add',
         method: 'post',
-        data:{
-            Role,
-            MenuList
-        }
+        data
       })
 }
 
-export function UpdateRole(Role,MenuList){
+export function UpdateRole(data){
     return fetch({
         url: '/role/update',
         method: 'post',
-        data:{
-            Role,
-            MenuList
-        }
+        data
       })
 }
 

src/permission.js

@@ -16,10 +16,12 @@ router.beforeEach((to, from, next) => {
       })
     } else {   
       if (store.getters.addRouters.length === 0) {
-        store.dispatch('GetInfo').then(res => {
-            console.log(store.getters.addRouters)
-          router.addRoutes(store.getters.addRouters)
-          next({ ...to})
+        store.dispatch('GetInfo').then(res => { // 拉取user_info
+          const roleauthname = res.RoleAuthName.split(',') // note: roles must be a array! such as: ['editor','develop']
+          store.dispatch('GenerateRoutes', { roleauthname }).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
+          })
         })
       } 
       else {

src/router/index.js

@@ -41,26 +41,55 @@ export default new Router({
 
 
 
-  export  const asyncRouterMap_Map = {
-    "movie": ()=>import('@/views/DouBan/movie'),
-  "music": ()=>import('@/views/DouBan/music'),
-   "book": ()=>import('@/views/DouBan/book'),
-   "users": ()=>import('@/views/system/users'),
-   "role": ()=>import('@/views/system/role'),
-    "dept": ()=>import('@/views/system/dept'),
-    "menu": ()=>import('@/views/system/menu'),
-
-    "person_edit": ()=>import('@/views/Archive/person'),
-    "person_detail": ()=>import('@/views/Archive/person_detail')
-
- }
-  // {
-  //   path: '/People',
-  //   component: Layout,
-  //   redirect: '/People/person',
-  //   name:"person",
-  //   title:"人员信息",
-  //   icon:'wujiaoxing',
-  //   children: [{ path: 'person', name: 'person1',title:"人员信息录入", component: ()=>import('@/views/KaoQin/person'),meta:{title:"人员信息录入"}}]
-  // },
+  export  const asyncRouterMap = [
+    {
+      path: '/Archive',
+      component: Layout,
+      redirect: '/Archive/person',
+      name:"Archive",
+      title:"廉政档案",
+      icon:'yonghuming',
+      children: [
+        { path: 'person', name: 'person',title:"廉政档案编辑", component: ()=>import('@/views/Archive/person'),meta:{title:"廉政档案编辑"}},
+        { path: 'person_detail', name: 'person_detail',title:"廉政档案查看", component: ()=>import('@/views/Archive/person_detail'),meta:{title:"廉政档案查看"}}
+      ]
+    },
 
+
+    {
+      path: '/DouBan',
+      component: Layout,
+      redirect: '/DouBan/person',
+      name:"DouBan",
+      title:"豆瓣查询",
+      icon:'tubiao',
+      children: [
+        { path: 'movie', name: 'movie',title:"热门电影", component: ()=>import('@/views/DouBan/movie'),meta:{title:"热门电影"}},
+        { path: 'music', name: 'music',title:"热门音乐", component: ()=>import('@/views/DouBan/music'),meta:{title:"热门音乐"}},
+        { path: 'book', name: 'book',title:"热门书籍", component: ()=>import('@/views/DouBan/book'),meta:{title:"热门书籍"}}
+
+      ]
+    },
+
+    {
+      path: '/system',
+      component: Layout,
+      redirect: '/system/user',
+      name:"system",
+      title:"系统设置",
+      icon:'zujian',
+      children: [
+        { path: 'users', name: 'users',title:"用户设置", component: ()=>import('@/views/system/users'),meta:{title:"用户设置"}},
+        { path: 'dept', name: 'dept',title:"部门设置", component: ()=>import('@/views/system/dept'),meta:{title:"部门设置"}},
+        { path: 'role', name: 'role',title:"角色设置", component: ()=>import('@/views/system/role'),meta:{title:"角色设置"}},
+        // { path: 'menu', name: 'menu',title:"菜单设置", component: ()=>import('@/views/system/menu'),meta:{title:"菜单设置"}}
+
+      ]
+    },
+
+    {path:"*",redirect:"/404",hidden:true}
+  ]
+
+
+
+

src/store/getters.js

@@ -6,7 +6,8 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   realname:state=>state.user.realname,
   name: state => state.user.name,
-  permission_routers: state => state.user.routers,
-  addRouters: state => state.user.addRouters
+  addRouters: state => state.permission.addRouters,
+  routers:state=>state.permission.routers
+
 }
 export default getters

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import app from './modules/app'
 import user from './modules/user'
 import tagsView from './modules/tagsView'
+import permission from './modules/permission'
 
 import getters from './getters'
 
@@ -12,6 +13,7 @@ const store = new Vuex.Store({
   modules: {
     app,
     user,
+    permission,
     tagsView
   },
   getters

src/store/modules/permission.js

@@ -0,0 +1,67 @@
+import {
+  asyncRouterMap,
+  constantRouterMap
+} from '@/router/index'
+
+/**
+ * 通过meta.role判断是否与当前用户权限匹配
+ * @param roles
+ * @param route
+ */
+function hasPermission(roles, route) {
+  if (route.name) {
+    return roles.some(role => route.name.includes(role))
+  } else {
+    return true
+  }
+}
+
+/**
+ * 递归过滤异步路由表，返回符合用户角色权限的路由表
+ * @param asyncRouterMap
+ * @param roles
+ */
+function filterAsyncRouter(asyncRouterMap, roleauthname) {
+  const accessedRouters = asyncRouterMap.filter(route => {
+    if (hasPermission(roleauthname, route)) {
+      if (route.children && route.children.length) {
+        route.children = filterAsyncRouter(route.children, roleauthname)
+      }
+      return true
+    }
+    return false
+  })
+  return accessedRouters
+}
+
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: [],
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
+    },
+  },
+  actions: {
+    GenerateRoutes({
+      commit
+    }, data) {
+      return new Promise(resolve => {
+        const {
+          roleauthname
+        } = data
+        let accessedRouters
+
+        accessedRouters = filterAsyncRouter(asyncRouterMap, roleauthname)
+
+        commit('SET_ROUTERS', accessedRouters)
+        resolve()
+      })
+    }
+  }
+}
+
+export default permission

src/store/modules/user.js

@@ -11,33 +11,8 @@ import {
 import {
   ChangePassword
 } from '@/api/login'
-import { constantRouterMap,asyncRouterMap_Map } from '@/router/index'
 
 import 'nprogress/nprogress.css' // Progress 进度条样式
-import Layout from '@/views/layout/Layout'
-
-
-function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串，转换为组件对象
-  const accessedRouters = asyncRouterMap.filter(route => {
-    if (route.component) {
-   if (route.component === 'Layout') {//Layout组件特殊处理
-        route.component = Layout
-      } else {
-        // route.component = ()=>import(`@/views/${route.component}`)
-
-        route.component =asyncRouterMap_Map[route.name]
-
-
-      }
-    }
-    if (route.children && route.children.length) {
-      route.children = filterAsyncRouter(route.children)
-    }
-    return true
-  })
-
-  return accessedRouters
-}
 
 
 
@@ -46,31 +21,15 @@ const user = {
     token: getToken(),
     name: '', //用户昵称名
     realname: '', //用户登录名
-    routers: constantRouterMap,  //登录后 则保存的是全部路由
-    addRouters: []    //后台返回的异步路由信息
-
   },
 
   mutations: {
-
-    SET_ROUTERS: (state, routers) => {
-
-      console.log(routers)
-      routers.push({path:"*",redirect:'/404',hidden:true})
-      state.addRouters = routers
-      state.routers = constantRouterMap.concat(routers)
-    },
-
-
-
     SET_TOKEN: (state, token) => {
       state.token = token
     },
     SET_NAME: (state, name) => {
       state.name = name
     },
-
-
     SET_REALNAME: (state, realname) => {
       state.realname = realname
     }
@@ -95,7 +54,6 @@ const user = {
 
           } else {
             commit('SET_TOKEN', '')
-            commit('SET_ROLES', [])
             removeToken()
             reject(data.message)
           }
@@ -118,12 +76,6 @@ const user = {
           console.log(data);
           commit('SET_NAME', data.RealName)
           commit('SET_REALNAME', data.UserName)
-          const asyncrouters  =filterAsyncRouter(data.Routers)
-
-          commit('SET_ROUTERS', asyncrouters)
-
-
-
           resolve(data)
         }).catch(error => {
           reject(error)
@@ -138,11 +90,9 @@ const user = {
     }) {
       return new Promise(resolve => {
         logout().then(res => {
-            commit('SET_TOKEN', '')
-            removeToken()
-            resolve()
-        }).catch(err => {
-          reject(err)
+          commit('SET_TOKEN', '')
+          removeToken()
+          resolve()
         })
 
       })
@@ -158,15 +108,15 @@ const user = {
           password: NewPassword
         }).then(response => {
           const data = response
-            resolve(data)
-            logout().then(res => {
-              commit('SET_TOKEN', '')
-              removeToken()
-              resolve()
+          resolve(data)
+          logout().then(res => {
+            commit('SET_TOKEN', '')
+            removeToken()
+            resolve()
           }).catch(err => {
             reject(err)
           })
-          
+
         }).catch(error => {
           reject(error)
         })