From 54acf1e0d5e2494be96fe9cd21071e8db39a278b Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 5 Jan 2018 11:38:34 +0800 Subject: [PATCH] perf[permission]:set role => roles --- src/mock/login.js | 4 ++-- src/permission.js | 23 +++++++++++++---------- src/router/index.js | 8 ++++---- src/store/modules/permission.js | 4 ++-- src/store/modules/user.js | 6 +++--- src/views/permission/index.vue | 8 ++++---- 6 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/mock/login.js b/src/mock/login.js index 8693ef98..b9694f09 100644 --- a/src/mock/login.js +++ b/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', diff --git a/src/permission.js b/src/permission.js index e3400588..87a591e5 100644 --- a/src/permission.js +++ b/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 } } }) diff --git a/src/router/index.js b/src/router/index.js index 221ec7eb..bdb31816 100644 --- a/src/router/index.js +++ b/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 (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,7 +64,7 @@ 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'), @@ -72,7 +72,7 @@ export const asyncRouterMap = [ meta: { title: 'permission', icon: 'lock', - role: ['admin'] + roles: ['admin'] // or you can only set roles in sub nav } }] }, diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js index 50e2bbe8..ce1aafa6 100644 --- a/src/store/modules/permission.js +++ b/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 } diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 8cf6d18a..18c93570 100644 --- a/src/store/modules/user.js +++ b/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) diff --git a/src/views/permission/index.vue b/src/views/permission/index.vue index 73a64e3e..9056a076 100644 --- a/src/views/permission/index.vue +++ b/src/views/permission/index.vue @@ -2,7 +2,7 @@
{{$t('permission.roles')}}： {{roles}}
{{$t('permission.switchRoles')}}： - +
@@ -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() }) }) }