vue权限控制
在SPA（单页面应用）中，前端需要根据用户的权限来控制用户菜单以及路由表，vue-router提供了几个路由生命周期钩子，叫做路由守卫，我们可以利用路由守卫在路由以及路由元信息进行权限控制，同时搭配vuex将会更美味，文末有完整示例地址。
登录权限
登录验证是最常见的一种路由权限验证，使用vuex + 路由守卫可以实现比较清晰流畅的鉴权流，能轻松应对页面刷新、清除缓存等场景。
路由元信息
vue-router在构建路由时提供了元信息meta配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。
// router.js
// 路由表元信息
[
{
path: '',
redirect: '/home'
},
{
path: '/home',
meta: {
title: 'Home',
icon: 'home'
}
},
{
path: '/userCenter',
meta: {
title: '个人中心',
requireAuth: true // 在需要登录的路由的meta中添加响应的权限标识
}
}
]
// 在守卫中访问元信息
function gaurd (to, from, next) {
// to.matched.some(record => record.meta.requireAuth)
// 可在此处
}
vuex
一般的，用户登录后会在本地持久化存储用户的认证信息，本文以JWT的token为例。将用户的token持久化到localStorage里，而用户信息则存在内存(store)中。这样可以在vuex中存储一个标记用户登录状态的属性auth，方便用语权限控制。
// store.js
{
state: {
token: window.localStorage.getItem('token'),
auth: false,
userInfo: {}
},
mutations: {
setToken (state, token) {
state.token = token
window.localStorage.setItem('token', token)
},
clearToken (state) {
state.token = ''
window.localStorage.setItem('token', '')
},
setUserInfo (state, userInfo) {
state.userInfo = userInfo
state.auth = true // 获取到用户信息的同时将auth标记为true，当然也可以直接判断userInfo
}
},
actions: {
async getUserInfo (ctx, token) {
return fetchUserInfo(token).then(response => {
if (response.code === 200) {
ctx.commit('setUserInfo', response.data)
}
return response
})
},
async login (ctx, account) {
return login(account).then(response => {
if (response.code === 200) {
ctx.commit('setUserInfo', response.data.userInfo)
ctx.commit('setToken', response.data.token)
}
})
}
}
}
路由守卫
写好路由表和vuex之后，给所有路由设置一个全局守卫，在进入路由之前进行权限检查，并导航到对应的路由。
// router.js
router.beforeEach(async (to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) { // 检查是否需要登录权限
if (!store.state.auth) { // 检查是否已登录
if (store.state.token) { // 未登录，但是有token，获取用户信息
try {
const data = await store.dispatch('getUserInfo', store.state.token)
if (data.code === 200) {
next()
} else {
window.alert('请登录')
store.commit('clearToken')
next({ name: 'Login' })
}
} catch (err) {
window.alert('请登录')
store.commit('clearToken')
next({ name: 'Login' })
}
} else {
window.alert('请登录')
next({ name: 'Login' })
}
} else {
next()
}
} else {
next()
}
})
后记
上述的方法是基于jwt认证方式，本地不持久化用户信息，只保存token，当用户刷新或者重新打开网页时，进入需要登录的页面都会尝试去请求用户信息，该操作在整个访问过程中只进行一次，直到刷新或者重新打开，对于应用后期的开发维护和扩展支持都很好。
动态加载菜单和路由
有时候为了安全，我们需要根据用户权限或者是用户属性去动态的添加菜单和路由表，可以实现对用户的功能进行定制。vue-router提供了addRoutes()方法，可以动态注册路由，需要注意的是，动态添加路由是在路由表中push路由，由于路由是按顺序匹配的，因此需要将诸如404页面这样的路由放在动态添加的最后。
路由元信息
// store.js
// 将需要动态注册的路由提取到vuex中
const dynamicRoutes = [
{
path: '/manage',
name: 'Manage',
meta: {
requireAuth: true
},
component: () => import('./views/Manage')
},
{
path: '/userCenter',
name: 'UserCenter',
meta: {
requireAuth: true
},
component: () => import('./views/UserCenter')
}
]
vuex
在vuex中添加userRoutes数组用于存储用户的定制菜单。在setUserInfo中根据后端返回的菜单生成用户的路由表。
// store.js
setUserInfo (state, userInfo) {
state.userInfo = userInfo
state.auth = true // 获取到用户信息的同时将auth标记为true，当然也可以直接判断userInfo
// 生成用户路由表
state.userRoutes = dynamicRoutes.filter(route => {
return userInfo.menus.some(menu => menu.name === route.name)
})
router.addRoutes(state.userRoutes) // 注册路由
}
修改菜单渲染
// App.vue
<div id="nav">
<router-link to="/">主页</router-link>|
<router-link to="/login">登录</router-link>
<template v-for="(menu, index) of $store.state.userInfo.menus">
|<router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link>
</template>
</div>
结束语
上述为前端控制菜单和路由权限的两种实现思路，经过本人实践效果令人满意，如果有更好的想法欢迎交流，附上完整示例地址：https://github.com/YES-Lee/vue-permission-demo
