使用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信息
+        }).catch(err => {
-          store.dispatch('GetInfo').then(() => { // 拉取info
+          console.log(err);
-            permission.init({ // 初始化权限
+        });
-              roles: store.getters.roles,
+      } else {
-              router: router.options.routes
+        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
-            });
+        if (hasPermission(store.getters.roles, to.meta.role)) {
-            if (hasPermission(store.getters.roles, to.meta.role)) { // 判断权限
+          next();//
-              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({ path: '/401', query: { noGoBack: true } });
-            permission.init({
-              roles: store.getters.roles,
-              router: router.options.routes
-            });
-            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,49 +70,56 @@ 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 },
     { path: '/reset', component: reset, hidden: true },
     { path: '/404', component: Err404, hidden: true },
     { path: '/401', component: Err401, hidden: true },
-    {
+  {
-      path: '/',
+    path: '/',
-      component: Layout,
+    component: Layout,
-      redirect: '/dashboard',
+    redirect: '/dashboard',
-      name: '首页',
+    name: '首页',
-      hidden: true,
+    hidden: true,
-      children: [{ path: 'dashboard', component: dashboard }]
+    children: [{ path: 'dashboard', component: dashboard }]
-    },
+  },
-    {
+  {
-      path: '/introduction',
+    path: '/introduction',
-      component: Layout,
+    component: Layout,
-      redirect: '/introduction/index',
+    redirect: '/introduction/index',
-      icon: 'xinrenzhinan',
+    icon: 'xinrenzhinan',
-      noDropdown: true,
+    noDropdown: true,
-      children: [{ path: 'index', component: Introduction, name: '简述' }]
+    children: [{ path: 'index', component: Introduction, name: '简述' }]
-    },
+  }
-    {
+]
-      path: '/permission',
+
-      component: Layout,
+export default new Router({
-      redirect: '/permission/index',
+  // mode: 'history', //后端支持可开
-      name: '权限测试',
+  scrollBehavior: () => ({ y: 0 }),
-      icon: 'quanxian',
+  routes: constantRouterMap
-      meta: { role: ['admin'] },
+});
-      noDropdown: true,
+
-      children: [{ path: 'index', component: Permission, name: '权限测试页', meta: { role: ['admin'] } }]
+export const asyncRouterMap = [
-    },
+  {
-    {
+    path: '/permission',
-      path: '/components',
+    component: Layout,
-      component: Layout,
+    redirect: '/permission/index',
-      redirect: '/components/index',
+    name: '权限测试',
-      name: '组件',
+    icon: 'quanxian',
-      icon: 'zujian',
+    meta: { role: ['admin'] },
-      children: [
+    noDropdown: true,
+    children: [{ path: 'index', component: Permission, name: '权限测试页', meta: { role: ['admin'] } }]
+  },
+  {
+    path: '/components',
+    component: Layout,
+    redirect: '/components/index',
+    name: '组件',
+    icon: 'zujian',
+    children: [
                 { path: 'index', component: componentsIndex, name: '介绍 ' },
                 { path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
                 { path: 'markdown', component: Markdown, name: 'Markdown' },
@@ -124,75 +131,73 @@ export default new Router({
                 { path: 'sticky', component: Sticky, name: 'Sticky' },
                 { path: 'countto', component: CountTo, name: 'CountTo' },
                 { path: 'mixin', component: Mixin, name: '小组件' }
-      ]
+    ]
-    },
+  },
-    {
+  {
-      path: '/charts',
+    path: '/charts',
-      component: Layout,
+    component: Layout,
-      redirect: '/charts/index',
+    redirect: '/charts/index',
-      name: '图表',
+    name: '图表',
-      icon: 'tubiaoleixingzhengchang',
+    icon: 'tubiaoleixingzhengchang',
-      children: [
+    children: [
                 { path: 'index', component: chartIndex, name: '介绍' },
                 { path: 'keyboard', component: KeyboardChart, name: '键盘图表' },
                 { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' },
                 { path: 'line', component: LineMarker, name: '折线图' },
                 { path: 'mixchart', component: MixChart, name: '混合图表' }
-      ]
+    ]
-    },
+  },
-    {
+  {
-      path: '/errorpage',
+    path: '/errorpage',
-      component: Layout,
+    component: Layout,
-      redirect: 'noredirect',
+    redirect: 'noredirect',
-      name: '错误页面',
+    name: '错误页面',
-      icon: '404',
+    icon: '404',
-      children: [
+    children: [
                 { path: '401', component: Err401, name: '401' },
                 { path: '404', component: Err404, name: '404' }
-      ]
+    ]
-    },
+  },
-    {
+  {
-      path: '/errlog',
+    path: '/errlog',
-      component: Layout,
+    component: Layout,
-      redirect: 'noredirect',
+    redirect: 'noredirect',
-      name: 'errlog',
+    name: 'errlog',
-      icon: 'bug',
+    icon: 'bug',
-      noDropdown: true,
+    noDropdown: true,
-      children: [{ path: 'log', component: ErrorLog, name: '错误日志' }]
+    children: [{ path: 'log', component: ErrorLog, name: '错误日志' }]
-    },
+  },
-    {
+  {
-      path: '/excel',
+    path: '/excel',
-      component: Layout,
+    component: Layout,
-      redirect: 'noredirect',
+    redirect: 'noredirect',
-      name: 'excel',
+    name: 'excel',
-      icon: 'EXCEL',
+    icon: 'EXCEL',
-      noDropdown: true,
+    noDropdown: true,
-      children: [{ path: 'download', component: ExcelDownload, name: '导出excel' }]
+    children: [{ path: 'download', component: ExcelDownload, name: '导出excel' }]
-    },
+  },
-    {
+  {
-      path: '/theme',
+    path: '/theme',
-      component: Layout,
+    component: Layout,
-      redirect: 'noredirect',
+    redirect: 'noredirect',
-      name: 'theme',
+    name: 'theme',
-      icon: 'theme',
+    icon: 'theme',
-      noDropdown: true,
+    noDropdown: true,
-      children: [{ path: 'index', component: Theme, name: '换肤' }]
+    children: [{ path: 'index', component: Theme, name: '换肤' }]
-    },
+  },
-    {
+  {
-      path: '/example',
+    path: '/example',
-      component: Layout,
+    component: Layout,
-      redirect: 'noredirect',
+    redirect: 'noredirect',
-      name: '综合实例',
+    name: '综合实例',
-      icon: 'zonghe',
+    icon: 'zonghe',
-      children: [
+    children: [
                 { path: 'dynamictable', component: DynamicTable, name: '动态table' },
                 { path: 'dragtable', component: DragTable, name: '拖拽table' },
                 { path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
                 { path: 'table', component: Table, name: '综合table' },
                 { path: 'form1', component: Form1, name: '综合form1' }
-      ]
+    ]
-    },
+  },
-
+  { path: '*', redirect: '/404', hidden: true }
-    { 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>