Vue 权限管理 / 鉴权
1. 什么是权限
权限是对特定资源的访问许可。所谓权限控制，也就是确保用户只能访问到被分配的资源。
而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发：
- 页面跳转触发
- 页面内按钮 / 操作触发
总的来说，所有的请求发起都触发自前端路由或视图。所以我们可以从这两方面入手，对触发权限的源头进行控制。
最终要实现的目标是：
- 用户只能访问到被分配的资源（菜单 / 页面 / 接口 / 按钮）。
2. 接口权限
接口权限目前一般采用 JWT 的形式来验证，没有通过的话一般返回 401，跳转到登录页重新登录。
登录后拿到 token，将 token 存起来，通过 axios 请求拦截器进行拦截，每次请求的时候头部携带 token：
axios.interceptors.request.use(config => {
config.headers['token'] = cookie.get('token')
return config
})
axios.interceptors.response.use(res => {}, { response } => {
if (response.data.code === 40099 || response.data.code === 40098) {
// token 过期或者错误
router.push('/login')
}
})
3. 路由权限控制
方案一
初始化即挂载全部路由，并且在路由上标记相应的权限信息，每次路由跳转前做校验：
const routerMap = [
{
path: '/permission',
component: Layout,
redirect: '/permission/index',
alwaysShow: true,
meta: {
title: 'permission',
icon: 'lock',
roles: ['admin', 'editor']
},
children: [
{
path: 'page',
component: () => import('@/views/permission/page'),
name: 'pagePermission',
meta: {
title: 'pagePermission',
roles: ['admin']
}
},
{
path: 'directive',
component: () => import('@/views/permission/directive'),
name: 'directivePermission',
meta: {
title: 'directivePermission'
}
}
]
}
]
这种方式存在以下四种缺点：
- 加载所有路由，对首屏性能不友好；
- 路由表全量暴露，存在一定安全风险；
- 菜单信息写死，无法动态调整；
- 每次跳转都要做权限判断，逻辑较散。
方案二
初始化时先挂载不需要权限控制的路由，比如登录页、404 等错误页。如果用户通过 URL 进行强制访问，则直接进入 404。
登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里调用 addRoutes 添加路由：
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
NProgress.configure({ showSpinner: false })
function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= 0) return true
if (!permissionRoles) return true
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login', '/authredirect']
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) {
store.dispatch('GetUserInfo').then(res => {
const roles = res.data.roles
store.dispatch('GenerateRoutes', { roles }).then(() => {
router.addRoutes(store.getters.addRouters)
next({ ...to, replace: true })
})
}).catch(err => {
store.dispatch('FedLogOut').then(() => {
Message.error(err || 'Verification failed, please login again')
next({ path: '/' })
})
})
} else {
if (hasPermission(store.getters.roles, to.meta.roles)) {
next()
} else {
next({ path: '/401', replace: true, query: { noGoBack: true } })
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
NProgress.done()
}
}
})
router.afterEach(() => {
NProgress.done()
})
按需挂载的方式需要在用户登录进来的时候就获取路由权限。这种方式也存在一些缺点：路由生成逻辑和后端约定耦合度高；首屏路由切换需要 replace；动态添加的路由不会出现在初始路由表中。
4. 菜单权限
菜单权限可以理解成将页面与路由进行解耦。
方案一：菜单与路由分离，菜单由后端返回
前端定义路由信息：
{
name: 'login',
path: '/login',
component: () => import('@/pages/Login.vue')
}
name 字段都不能为空，需要根据此字段与后端返回的菜单做关联，后端返回的菜单信息中必须要有 name 对应的字段，并且做唯一性校验。
全局路由守卫里做判断：
function hasPermission(router, accessMenu) {
if (whiteList.indexOf(router.path) !== -1) {
return true
}
let menu = Util.getMenuByName(router.name, accessMenu)
if (menu.name) {
return true
}
return false
}
Router.beforeEach(async (to, from, next) => {
if (getToken()) {
let userInfo = store.state.user.userInfo
if (!userInfo.name) {
try {
await store.dispatch('GetUserInfo')
await store.dispatch('updateAccessMenu')
if (to.path === '/login') {
next({ name: 'home_index' })
} else {
next({ ...to, replace: true })
}
} catch (e) {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
} else {
if (to.path === '/login') {
next({ name: 'home_index' })
} else {
if (hasPermission(to, store.getters.accessMenu)) {
Util.toDefaultPage(store.getters.accessMenu, to, routes, next)
} else {
next({ path: '/403', replace: true })
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
let menu = Util.getMenuByName(to.name, store.getters.accessMenu)
Util.title(menu.title)
})
Router.afterEach((to) => {
window.scrollTo(0, 0)
})
每次路由跳转时都要判断权限。如果路由很多，可以在应用初始化时只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过 addRoutes 动态挂载。
方案二：菜单和路由都由后端返回
前端统一定义路由组件：
const Home = () => import('../pages/Home.vue')
const UserInfo = () => import('../pages/UserInfo.vue')
export default {
home: Home,
userInfo: UserInfo
}
后端返回路由路径，前端根据路径将提前定义好的组件放进去：
[
{
name: 'home',
path: '/',
component: 'home'
},
{
name: 'home',
path: '/userinfo',
component: 'userInfo'
}
]
在将后端返回路由通过 addRoutes 动态挂载之前，需要将数据处理一下，将 component 字段换为真正的组件。如果有嵌套路由，后端设计时要注意添加相应的字段，前端拿到数据也要做相应的处理。
5. 按钮权限
方案一
按钮权限也可以用 v-if 判断。但页面过多时，每个页面都要获取用户权限 role 和路由表里的 meta.btnPermissions，再做判断，繁琐。
方案二：通过自定义指令进行按钮权限的判断
首先配置路由：
{
path: '/permission',
component: Layout,
name: '权限测试',
meta: {
btnPermissions: ['admin', 'supper', 'normal']
},
children: [
{
path: 'supper',
component: _import('system/supper'),
name: '权限测试页',
meta: {
btnPermissions: ['admin', 'supper']
}
},
{
path: 'normal',
component: _import('system/normal'),
name: '权限测试页',
meta: {
btnPermissions: ['admin']
}
}
]
}
自定义权限鉴定指令：
import Vue from 'vue'
/** 权限指令 **/
const has = Vue.directive('has', {
bind(el, binding, vnode) {
let btnPermissionsArr = []
if (binding.value) {
btnPermissionsArr = Array.of(binding.value)
} else {
btnPermissionsArr = vnode.context.$route.meta.btnPermissions
}
if (!Vue.prototype.$_has(btnPermissionsArr)) {
el.parentNode.removeChild(el)
}
}
})
Vue.prototype.$_has = function (value) {
let isExist = false
let btnPermissionsStr = sessionStorage.getItem('btnPermissions')
if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
return false
}
if (value.indexOf(btnPermissionsStr) > -1) {
isExist = true
}
return isExist
}
export { has }
在使用按钮的组件里只需要引用 v-has 指令：
<el-button @click="editClick" type="primary" v-has>编辑</el-button>
来源整理自：vue3js.cn 面试官系列
