perf[permission]:set role => roles

Author: PanJiaChen

src/mock/login.js

@@ -2,14 +2,14 @@ import { param2Obj } from '@/utils'
 
 const userMap = {
   admin: {
-    role: ['admin'],
+    roles: ['admin'],
     token: 'admin',
     introduction: '我是超级管理员',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Super Admin'
   },
   editor: {
-    role: ['editor'],
+    roles: ['editor'],
     token: 'editor',
     introduction: '我是编辑',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',

src/permission.js

@@ -1,11 +1,13 @@
 import router from './router'
 import store from './store'
+import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css'// progress bar style
 import { getToken } from '@/utils/auth' // getToken from cookie
-import { Message } from 'element-ui'
 
-// permissiom judge
+NProgress.configure({ showSpinner: false })// NProgress Configuration
+
+// permissiom judge function
 function hasPermission(roles, permissionRoles) {
   if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
   if (!permissionRoles) return true
@@ -16,15 +18,16 @@ const whiteList = ['/login', '/authredirect']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
-  if (getToken()) { // 判断是否有token
+  if (getToken()) { // determine if there has token
+    /* has token*/
     if (to.path === '/login') {
       next({ path: '/' })
-      NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
     } else {
       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetUserInfo').then(res => { // 拉取user_info
-          const roles = res.data.role
-          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
+          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
+          store.dispatch('GenerateRoutes', { roles }).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
           })
@@ -36,21 +39,21 @@ router.beforeEach((to, from, next) => {
         })
       } else {
         // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
-        if (hasPermission(store.getters.roles, to.meta.role)) {
+        if (hasPermission(store.getters.roles, to.meta.roles)) {
           next()//
         } else {
-          next({ path: '/401', query: { noGoBack: true }})
-          NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+          next({ path: '/401', replace: true, query: { noGoBack: true }})
         }
         // 可删 ↑
       }
     }
   } else {
+    /* has no token*/
     if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
       next()
     } else {
       next('/login') // 否则全部重定向到登录页
-      NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
+      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }
   }
 })

src/router/index.js

@@ -18,7 +18,7 @@ import Layout from '../views/layout/Layout'
 * redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
-    role: ['admin','editor']     will control the page role (you can set multiple roles)
+    roles: ['admin','editor']     will control the page roles (you can set multiple roles)
     title: 'title'               the name show in submenu and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar,
     noCache: true                if fasle ,the page will no be cached(default is false)
@@ -54,7 +54,7 @@ export const constantRouterMap = [
 ]
 
 export default new Router({
-  // mode: 'history', //后端支持可开
+  // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap
 })
@@ -64,15 +64,15 @@ export const asyncRouterMap = [
     path: '/permission',
     component: Layout,
     redirect: '/permission/index',
-    meta: { role: ['admin'] },
+    meta: { roles: ['admin'] }, // you can set roles in root nav
     children: [{
       path: 'index',
       component: _import('permission/index'),
       name: 'permission',
       meta: {
         title: 'permission',
         icon: 'lock',
-        role: ['admin']
+        roles: ['admin'] // or you can only set roles in sub nav
       }
     }]
   },

src/store/modules/permission.js

@@ -6,8 +6,8 @@ import { asyncRouterMap, constantRouterMap } from '@/router'
  * @param route
  */
 function hasPermission(roles, route) {
-  if (route.meta && route.meta.role) {
-    return roles.some(role => route.meta.role.indexOf(role) >= 0)
+  if (route.meta && route.meta.roles) {
+    return roles.some(role => route.meta.roles.indexOf(role) >= 0)
   } else {
     return true
   }

src/store/modules/user.js

@@ -67,7 +67,7 @@ const user = {
             reject('error')
           }
           const data = response.data
-          commit('SET_ROLES', data.role)
+          commit('SET_ROLES', data.roles)
           commit('SET_NAME', data.name)
           commit('SET_AVATAR', data.avatar)
           commit('SET_INTRODUCTION', data.introduction)
@@ -116,13 +116,13 @@ const user = {
     },
 
     // 动态修改权限
-    ChangeRole({ commit }, role) {
+    ChangeRoles({ commit }, role) {
       return new Promise(resolve => {
         commit('SET_TOKEN', role)
         setToken(role)
         getUserInfo(role).then(response => {
           const data = response.data
-          commit('SET_ROLES', data.role)
+          commit('SET_ROLES', data.roles)
           commit('SET_NAME', data.name)
           commit('SET_AVATAR', data.avatar)
           commit('SET_INTRODUCTION', data.introduction)

src/views/permission/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
     {{$t('permission.switchRoles')}}：
-    <el-radio-group v-model="role">
+    <el-radio-group v-model="switchRoles">
       <el-radio-button label="editor"></el-radio-button>
     </el-radio-group>
   </div>
@@ -15,7 +15,7 @@ export default{
   name: 'permission',
   data() {
     return {
-      role: ''
+      switchRoles: ''
     }
   },
   computed: {
@@ -24,8 +24,8 @@ export default{
     ])
   },
   watch: {
-    role(val) {
-      this.$store.dispatch('ChangeRole', val).then(() => {
+    switchRoles(val) {
+      this.$store.dispatch('ChangeRoles', val).then(() => {
         this.$router.push({ path: '/permission/index?' + +new Date() })
       })
     }