支持动态菜单～

Author: fantasykai

src/App.vue

@@ -45,6 +45,14 @@ body {
 	margin-right: 10px;
 }
 
+.svg-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+
 .toolbar {
 	/*background: #f2f2f2;*/
 	padding: 10px;

src/assets/iconfont/iconfont.js

@@ -0,0 +1,22 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'icon-svg',
+    props: {
+      iconClass: {
+        type: String,
+        required: true
+      }
+    },
+    computed: {
+      iconName() {
+        return `#icon-${this.iconClass}`
+      }
+    }
+  }
+</script>

src/components/common/Icon-svg/index.vue

@@ -3,55 +3,83 @@ import Vue from 'vue'
 import App from './App.vue'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
-import VueRouter from 'vue-router'
+import NProgress from 'nprogress'; // Progress 进度条
+import 'nprogress/nprogress.css';// Progress 进度条 样式
+import './assets/iconfont/iconfont';
+import IconSvg from './components/common/Icon-svg';// svg 组件
 import store from './store'
-import Vuex from 'vuex'
-import routes from './routes'
+import router from './routes'
 import {sync} from 'vuex-router-sync'
 import VueVideoPlayer from 'vue-video-player'
 import * as filters from './filters'; // 全局vue filter
 
-import Mock from './mock';
-Mock.bootstrap();
-
-
+Vue.component('icon-svg', IconSvg);
 Vue.use(ElementUI);
-Vue.use(VueRouter);
-Vue.use(Vuex);
 Vue.use(VueVideoPlayer);
 
 // register global utility filters.
 Object.keys(filters).forEach(key => {
     Vue.filter(key, filters[key])
 });
 
-const router = new VueRouter({
-    routes
-});
+// 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)
+}
 
-// Some middleware to help us ensure the user is authenticated.
+// register global progress.
+const whiteList = ['/login'];// 不重定向白名单
 router.beforeEach((to, from, next) => {
-    //NProgress.start();
-    if (to.path === '/login') {
-        localStorage.removeItem('account');
-        localStorage.removeItem('token');
-        localStorage.removeItem('expiration');
-        localStorage.removeItem('nickname');
-    }
-    let token = localStorage.getItem('token');
-    if (!token && to.path !== '/login') {
-        next({path: '/login'})
-    } else if (token && to.path === '/') {
-        next({path: '/dashboard'})
-    }
-    else {
-        next();
+    NProgress.start(); // 开启Progress
+    if (localStorage.getItem("token")) { // 判断是否有token
+        if (to.path === '/login') {
+            localStorage.removeItem('account');
+            localStorage.removeItem('token');
+            localStorage.removeItem('expiration');
+            localStorage.removeItem('nickname');
+            next({path: '/'});
+        } else {
+            if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
+                store.dispatch('GetUserInfo').then(() => { // 拉取user_info
+                    const roles = store.getters.roles;
+                    store.dispatch('GenerateRoutes', {roles}).then(() => { // 生成可访问的路由表
+                        router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
+                        next({...to}); // hack方法 确保addRoutes已完成
+                    })
+                }).catch(() => {
+                    store.dispatch('LogOut').then(() => {
+                        next({path: '/login'});
+                    })
+                })
+            } else {
+                // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
+                if (hasPermission(store.getters.roles, to.meta.role)) {
+                    next();//
+                } else {
+                    next({path: '/401', query: {noGoBack: true}});
+                }
+                // 可删 ↑
+            }
+        }
+    } else {
+        if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
+            next()
+        } else {
+            next('/login'); // 否则全部重定向到登录页
+            NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+        }
     }
 });
 
-sync(store, router);
+router.afterEach(() => {
+    NProgress.done(); // 结束Progress
+});
 
 
+sync(store, router);
+
 new Vue({
     router,
     store,

src/main.js

@@ -1,3 +1,5 @@
+import Vue from 'vue';
+import Router from 'vue-router';
 import Login from './components/page/Login.vue';
 import NotFoundView from './components/common/error/404.vue';
 import NotPermission from './components/common/error/401.vue';
@@ -15,8 +17,9 @@ import FrisNumCycleCharts from './components/page/friends/stat/FrisNumCycleChart
 import MsgNumCycleCharts from './components/page/msg/stat/MsgNumCycleCharts.vue';
 import GeoUserNumCityRanked from './components/page/userDataStat/GeoUserNumCityRanked.vue';
 
+Vue.use(Router);
 
-let routes = [
+export const defaultRouterMap = [
     {
         path: '/login',
         component: Login,
@@ -40,16 +43,27 @@ let routes = [
         path: '/',
         component: Home,
         name: '',
-        iconCls: 'el-icon-star-on',
+        // iconCls: 'el-icon-star-on',
+        icon: 'favorfill',
         leaf: true,//只有一个节点
         children: [
             {path: '/dashboard', component: Dashboard, name: '应用概况'}
         ]
-    },
+    }
+];
+
+export default new Router({
+    // mode: 'history', //后端支持可开
+    scrollBehavior: () => ({y: 0}),
+    routes: defaultRouterMap
+});
+
+export const asyncRouterMap = [
     {
         path: '/',
         component: Home,
         name: '数据趋势',
+        meta: {role: ['admin']},
         iconCls: 'el-icon-menu',
         children: [
             {path: '/cycleCharts', component: CycleCharts, name: '注册用户趋势'},
@@ -63,6 +77,7 @@ let routes = [
         path: '/',
         component: Home,
         name: '用户管理',
+        meta: {role: ['admin']},
         iconCls: 'el-icon-star-off',
         children: [
             {path: '/userManage', component: UserManage, name: 'Sys用户管理'},
@@ -84,6 +99,7 @@ let routes = [
         path: '/',
         component: Home,
         name: '运营数据',
+        meta: {role: ['admin']},
         iconCls: 'el-icon-date',
         children: [
             // {path: '/videoTest', component: VideoTest, name: '视频播放测试'},
@@ -104,4 +120,3 @@ let routes = [
     }
 ];
 
-export default routes;

src/routes.js

@@ -1,9 +1,12 @@
 const getters = {
     token: state => state.user.token,
+    roles: state => state.user.roles,
     avatar: state => state.user.avatar,
     nickname: state => state.user.nickname,
     uid: state => state.user.account,
     ossSts: state => state.user.ossSts,
     ossClient: state => state.user.ossClient,
+    permission_routers: state => state.permission.routers,
+    addRouters: state => state.permission.addRouters,
 };
 export default getters

src/store/getters.js

@@ -4,16 +4,20 @@ import state from './state'
 import actions from './actions'
 import mutations from './mutations'
 import user from './modules/user';
+import permission from './modules/permission';
 import getters from './getters'
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
     modules: {
         user,
+        permission
     },
     getters,
     state,
     actions,
     mutations
-})
+});
+
+export default store

src/store/index.js

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