使用addRoutes重构权限

src/main.js

@@ -20,7 +20,6 @@ import Sticky from 'components/Sticky'; // 粘性header组件
 import vueWaves from './directive/waves';// 水波纹指令
 import errLog from 'store/errLog';// error log组件
 import './mock/index.js';  // 该项目所有请求使用mockjs模拟
-import permission from 'store/permission'; // 权限控制
 
 // register globally
 Vue.component('multiselect', Multiselect);
@@ -36,6 +35,7 @@ Object.keys(filters).forEach(key => {
 // permissiom judge
 function hasPermission(roles, permissionRoles) {
   if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过
+  if (!permissionRoles) return true;
   return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
 
@@ -47,42 +47,24 @@ router.beforeEach((to, from, next) => {
     if (to.path === '/login') {
       next({ path: '/' });
     } else {
-      if (to.meta && to.meta.role) { // 判断即将进入的页面是否需要权限
+      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完info信息
-        if (store.getters.roles.length !== 0) { // 判断当前用户是否已拉取完info信息
+        store.dispatch('GetInfo').then(res => { // 拉取info
-          if (hasPermission(store.getters.roles, to.meta.role)) { // 判断权限
+          const roles = res.data.role;
-            next(); // 有权限
+          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
-          } else {
+            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
-            next({ path: '/401', query: { noGoBack: true } }); // 无权限
+            next(to); // hack方法 确保addRoutes已完成
-          }
+          })
-        } else { // 未拉取info信息
-          store.dispatch('GetInfo').then(() => { // 拉取info
-            permission.init({ // 初始化权限
-              roles: store.getters.roles,
-              router: router.options.routes
-            });
-            if (hasPermission(store.getters.roles, to.meta.role)) { // 判断权限
-              next();// 有权限
-            } else {
-              next({ path: '/401', query: { noGoBack: true } }); // 无权限
-            }
         }).catch(err => {
           console.log(err);
         });
-        }
-      } else { // 页面不需要权限 直接进入
-        if (store.getters.roles.length !== 0) {
-          next();
       } else {
-          store.dispatch('GetInfo').then(() => {
+        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
-            permission.init({
+        if (hasPermission(store.getters.roles, to.meta.role)) {
-              roles: store.getters.roles,
+          next();//
-              router: router.options.routes
+        } else {
-            });
+          next({ path: '/401', query: { noGoBack: true } });
-            next();
-          }).catch(err => {
-            console.log(err);
-          });
         }
+        // 可删 ↑
       }
     }
   } else {
@@ -95,6 +77,7 @@ router.beforeEach((to, from, next) => {
   }
 });
 
+
 router.afterEach(() => {
   NProgress.done(); // 结束Progress
 });

src/router/index.js

@@ -70,10 +70,8 @@ Vue.use(Router);
   * noDropdown : if noDropdown:true will not has submenu
   * meta : { role: ['admin'] }  will control the page role
   */
-export default new Router({
+
-  // mode: 'history', //后端支持可开
+export const constantRouterMap = [
-  scrollBehavior: () => ({ y: 0 }),
-  routes: [
     { path: '/login', component: Login, hidden: true },
     { path: '/authredirect', component: authRedirect, hidden: true },
     { path: '/sendpwd', component: sendPWD, hidden: true },
@@ -95,7 +93,16 @@ export default new Router({
     icon: 'xinrenzhinan',
     noDropdown: true,
     children: [{ path: 'index', component: Introduction, name: '简述' }]
-    },
+  }
+]
+
+export default new Router({
+  // mode: 'history', //后端支持可开
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap
+});
+
+export const asyncRouterMap = [
   {
     path: '/permission',
     component: Layout,
@@ -192,7 +199,5 @@ export default new Router({
                 { path: 'form1', component: Form1, name: '综合form1' }
     ]
   },
-
   { path: '*', redirect: '/404', hidden: true }
-  ]
+];
-});

src/store/getters.js

@@ -1,6 +1,5 @@
 const getters = {
   sidebar: state => state.app.sidebar,
-  livenewsChannels: state => state.app.livenewsChannels,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
@@ -10,6 +9,8 @@ const getters = {
   auth_type: state => state.user.auth_type,
   status: state => state.user.status,
   roles: state => state.user.roles,
-  setting: state => state.user.setting
+  setting: state => state.user.setting,
+  permission_routers: state => state.permission.routers,
+  addRouters: state => state.permission.addRouters
 };
 export default getters

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import app from './modules/app';
 import user from './modules/user';
+import permission from './modules/permission';
 import getters from './getters';
 
 Vue.use(Vuex);
@@ -9,7 +10,8 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   modules: {
     app,
-    user
+    user,
+    permission
   },
   getters
 });

src/store/modules/app.js

@@ -16,21 +16,11 @@ const app = {
         Cookies.set('sidebarStatus', 0);
       }
       state.sidebar.opened = !state.sidebar.opened;
-    },
-    SET_LIVENEWS_CHANNELS: (status, channels) => {
-      status.livenewsChannels = JSON.stringify(channels);
-      Cookies.set('livenewsChannels', JSON.stringify(channels));
     }
   },
   actions: {
     ToggleSideBar: ({ commit }) => {
       commit('TOGGLE_SIDEBAR')
-    },
-    setTheme: ({ commit }, theme) => {
-      commit('SET_THEME', theme)
-    },
-    setlivenewsChannels: ({ commit }, channels) => {
-      commit('SET_LIVENEWS_CHANNELS', channels)
     }
   }
 };

src/store/modules/permission.js

@@ -0,0 +1,51 @@
+import { asyncRouterMap, constantRouterMap } from 'src/router';
+
+function hasPermission(roles, route) {
+  if (route.meta && route.meta.role) {
+    return roles.some(role => route.meta.role.indexOf(role) >= 0)
+  } else {
+    return true
+  }
+}
+
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: []
+  },
+
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers;
+      state.routers = constantRouterMap.concat(routers);
+    }
+  },
+
+  actions: {
+    // s
+    GenerateRoutes({ commit }, data) {
+      const { roles } = data;
+      const accessedRouters = asyncRouterMap.filter(v => {
+        if (roles.indexOf('admin') >= 0) return true;
+        if (hasPermission(roles, v)) {
+          if (v.children && v.children.length > 0) {
+            v.children = v.children.filter(child => {
+              if (hasPermission(roles, child)) {
+                return child
+              }
+              return false;
+            });
+            return v
+          } else {
+            return v
+          }
+        }
+        return false;
+      });
+      commit('SET_ROUTERS', accessedRouters);
+    }
+  }
+};
+
+
+export default permission;

src/store/permission.js

@@ -1,38 +0,0 @@
-const permission = {
-  state: {
-    permissionRoutes: []
-  },
-  init(data) {
-    const { roles, router } = data;
-    const permissionRoutes = router.filter(v => {
-      if (roles.indexOf('admin') >= 0) return true;
-      if (this.hasPermission(roles, v)) {
-        if (v.children && v.children.length > 0) {
-          v.children = v.children.filter(child => {
-            if (this.hasPermission(roles, child)) {
-              return child
-            }
-            return false;
-          });
-          return v
-        } else {
-          return v
-        }
-      }
-      return false;
-    });
-    this.state.permissionRoutes = permissionRoutes;
-  },
-  get() {
-    return this.state.permissionRoutes
-  },
-  hasPermission(roles, route) {
-    if (route.meta && route.meta.role) {
-      return roles.some(role => route.meta.role.indexOf(role) >= 0)
-    } else {
-      return true
-    }
-  }
-};
-
-export default permission;

src/views/errlog/index.vue

@@ -28,4 +28,8 @@
       }
     };
 </script>
-
+<style scoped>
+.errPage-container{
+  padding: 30px;
+}
+</style>

src/views/layout/Navbar.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
+    import { mapGetters } from 'vuex';
     import Levelbar from './Levelbar';
     import Hamburger from 'components/Hamburger';
     import ErrLog from 'components/ErrLog';
@@ -56,7 +56,7 @@
         },
         logout() {
           this.$store.dispatch('LogOut').then(() => {
-            this.$router.push({ path: '/login' })
+            location.reload();// 为了重新实例化vue-router对象 避免bug
           });
         }
       }

src/views/layout/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
-        <template v-for="item in permissionRoutes" v-if="!item.hidden">
+        <template v-for="item in permission_routers" v-if="!item.hidden">
             <el-submenu :index="item.name" v-if="!item.noDropdown">
                 <template slot="title">
                     <wscn-icon-svg :icon-class="item.icon||'wenzhang1'" /> {{item.name}}
@@ -21,13 +21,14 @@
 </template>
 
 <script>
-    import permissionRoutes from 'store/permission';
+    import { mapGetters } from 'vuex';
+
     export default {
       name: 'Sidebar',
-      data() {
+      computed: {
-        return {
+        ...mapGetters([
-          permissionRoutes: permissionRoutes.get()
+          'permission_routers'
-        }
+        ])
       }
     }
 </script>