详解基于vue，vue-router, vuex以及addRoutes进行权限控制
基于 vuex, vue-router,vuex 的权限控制教程，完整代码地址见 https://github.com/linrunzheng/vue-permission-control
接下来让我们模拟一个普通用户打开网站的过程，一步一步的走完整个流程。
首先从打开本地的服务 localhost:8080 开始，我们知道打开后会进入 login 页面，那么判断的依据是什么。
首先是 token。
没有登陆的用户是获取不到 token 的，而登陆后的角色我们会将 token 存到 local 或者 seesionStorage 因此，根据当前有没有 token 即可知道是否登陆。
为了存取 token 并且方便我们操作，可以配和 vuex 实现
/* state.js */
export default {
get UserToken() {
return localStorage.getItem('token')
},
set UserToken(value) {
localStorage.setItem('token', value)
}
}
/* mutation.js */
export default {
LOGIN_IN(state, token) {
state.UserToken = token
},
LOGIN_OUT(state) {
state.UserToken = ''
}
}
拦截的判断
- 没有 token 进入需要权限的页面：redirect 到 login 页面
- 由于我们路由是动态挂载的，包括 ' ' 和 404，所以当匹配不到路由时，也重定向到 login
router.beforeEach((to, from, next) => {
if (!store.state.UserToken) {
if (
to.matched.length > 0 &&
!to.matched.some(record => record.meta.requiresAuth)
) {
next()
} else {
next({ path: '/login' })
}
}
})
好了，此时用户打开 localhost:8080, 默认匹配的是 '' 路径，此时我们并没有挂载路由，也没有 token，所以来到了 login。
输入用户名密码后，有 token 了，通过 store 触发 * commit('LOGIN_IN')* 来设置 token。
但是还是没有路由，目前最开始只有 login 路由
/* 初始路由 */
export default new Router({
routes: [
{
path: '/login',
component: Login
}
]
})
/* 准备动态添加的路由 /
export const DynamicRoutes = [
{
path: '',
component: Layout,
name: 'container',
redirect: 'home',
meta: {
requiresAuth: true,
name: '首页'
},
children: [
{
path: 'home',
component: Home,
name: 'home',
meta: {
name: '首页'
}
}
]
},
{
path: '/403',
component: Forbidden
},
{
path: '',
component: NotFound
}
]
我们要根据当前用户的 token 去后台获取权限。
由于权限这块逻辑还挺多，所以在 vuex 添加了一个 permission 模块来处理权限。
为了判断是已有路由列表，需要在 vuex 的 permission 模块存一个 state 状态 permissionList 用来判断, 假如 permissionList 不为 null，即已经有路由，如果不存在，就需要我们干活了。
router.beforeEach((to, from, next) => {
if (!store.state.UserToken) {
...
} else {
/* 现在有 token 了 */
if (!store.state.permission.permissionList) {
/* 如果没有 permissionList，真正的工作开始了 */
store.dispatch('permission/FETCH_PERMISSION').then(() => {
next({ path: to.path })
})
} else {
if (to.path !== '/login') {
next()
} else {
next(from.fullPath)
}
}
}
})
来看一下 store.dispatch('permission/FETCH_PERMISSION') 都干了什么
actions: {
async FETCH_PERMISSION({commit, state}) {
/* 获取后台给的权限数组 */
let permissionList = await fetchPermission()
<span class="hljs-comment">/* 根据后台权限跟我们定义好的权限对比，筛选出对应的路由并加入到path=''的children */</span>
<span class="hljs-keyword">let</span> routes = <span class="hljs-title function_">recursionRouter</span>(permissionList, dynamicRouter)
<span class="hljs-keyword">let</span> <span class="hljs-title class_">MainContainer</span> = <span class="hljs-title class_">DynamicRoutes</span>.<span class="hljs-title function_">find</span>(<span class="hljs-function"><span class="hljs-params">v</span> =></span> v.<span class="hljs-property">path</span> === <span class="hljs-string">''</span>)
<span class="hljs-keyword">let</span> children = <span class="hljs-title class_">MainContainer</span>.<span class="hljs-property">children</span>
children.<span class="hljs-title function_">push</span>(...routes)
<span class="hljs-comment">/* 生成左侧导航菜单 */</span>
<span class="hljs-title function_">commit</span>(<span class="hljs-string">'SET_MENU'</span>, children)
<span class="hljs-title function_">setDefaultRoute</span>([<span class="hljs-title class_">MainContainer</span>])
<span class="hljs-comment">/* 初始路由 */</span>
<span class="hljs-keyword">let</span> initialRoutes = router.<span class="hljs-property">options</span>.<span class="hljs-property">routes</span>
<span class="hljs-comment">/* 动态添加路由 */</span>
router.<span class="hljs-title function_">addRoutes</span>(<span class="hljs-title class_">DynamicRoutes</span>)
<span class="hljs-comment">/* 完整的路由表 */</span>
<span class="hljs-title function_">commit</span>(<span class="hljs-string">'SET_PERMISSION'</span>, [...initialRoutes, ...<span class="hljs-title class_">DynamicRoutes</span>])
}
}
首先,await fetchPermission() 获取后台给的权限数组，格式大概如下
{
"code": 0,
"message": "获取权限成功",
"data": [
{
"name": "订单管理",
"children": [
{
"name": "订单列表"
},
{
"name": "生产管理",
"children": [
{
"name": "生产列表"
}
]
},
{
"name": "退货管理"
}
]
}
]
}
其次根据我们写好的路由数组，进行对比，过滤得到我们要的路由
/* 这里是我们写好的需要权限判断的路由 */
const dynamicRoutes = [
{
path: '/order',
component: Order,
name: 'order-manage',
meta: {
name: '订单管理'
},
children: [
{
path: 'list',
name: 'order-list',
component: OrderList,
meta: {
name: '订单列表'
}
},
{
path: 'product',
name: 'product-manage',
component: ProductManage,
meta: {
name: '生产管理'
},
children: [
{
path: 'list',
name: 'product-list',
component: ProductionList,
meta: {
name: '生产列表'
}
},
{
path: 'review',
name: 'review-manage',
component: ReviewManage,
meta: {
name: '审核管理'
}
}
]
},
{
path: 'returnGoods',
name: 'return-goods',
component: ReturnGoods,
meta: {
name: '退货管理'
}
}
]
}
]
export default dynamicRoutes
为了对比，我写好了一个递归函数，用 name 和 meta.name 进行对比 ，根据这个函数就可以得到我们想要的结果
/**
*
* @param {Array} userRouter 后台返回的用户权限 json
* @param {Array} allRouter 前端配置好的所有动态路由的集合
* @return {Array} realRoutes 过滤后的路由
*/
export function recursionRouter(userRouter = [], allRouter = []) {
var realRoutes = []
allRouter.forEach((v, i) => {
userRouter.forEach((item, index) => {
if (item.name === v.meta.name) {
if (item.children && item.children.length > 0) {
v.children = recursionRouter(item.children, v.children)
}
realRoutes.push(v)
}
})
})
return realRoutes
}
得到过滤后的数组后，加入到 path 为 '' 的 children 下面
{
path: '',
component: Layout,
name: 'container',
redirect: 'home',
meta: {
requiresAuth: true,
name: '首页'
},
children: [
{
path: 'home',
component: Home,
name: 'home',
meta: {
name: '首页'
}
},
<!-- 将上面得到的东西加入到这里 -->
...
]
}
这个时候,path 为 '' 的 children 就是我们左侧的导航菜单了，存到 state 的 sidebarMenu 待用。加入到 children 后，这时 DynamicRoutes 就可以加入到路由了。
/* 动态添加路由 */
router.addRoutes(DynamicRoutes)
/* 初始路由 /
let initialRoutes = router.options.routes
/ 合并起来，就是完整的路由了 */
commit('SET_PERMISSION', [...initialRoutes, ...DynamicRoutes])
路由添加完了，也就是action操作完毕了，即可在action.then里面调用 next({ path: to.path })进去路由，这里要注意, next里面要传参数即要进入的页面的路由信息，因为next传参数后，当前要进入的路由会被废止，转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
进入路由后，要开始生成左侧菜单，之前我们已经存到 sidebarMenu 了，现在需要做的只是递归生成菜单而已，虽然用了 element 的导航菜单，但是为了递归路由，还需要自己封装一下。这里核心的地方是组件的 name，在组件里面有 children 的地方，又再次使用自己，从而遍历整个 tree 结构的路由。
<template>
<div class="menu-container">
<template v-for="v in menuList">
<el-submenu :index="v.name" v-if="v.children&&v.children.length>0" :key="v.name">
<template slot="title">
<i class="iconfont icon-home"></i>
<span>{{v.meta.name}}</span>
</template>
<el-menu-item-group>
<my-nav :menuList="v.children"></my-nav>
</el-menu-item-group>
</el-submenu>
<el-menu-item :key="v.name" :index="v.name" @click="gotoRoute(v.name)" v-else>
<i class="iconfont icon-home"></i>
<span slot="title">{{v.meta.name}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
name: 'my-nav',
props: {
menuList: {
type: Array,
default: function() {
return []
}
}
},
methods: {
gotoRoute(name) {
this.$router.push({name})
}
}
}
</script>
刷新页面后，根据我们 router.beforeEach 的判断，有 token 但是没 permissionList，我们是会重新触发 action 去获取路由的，所以无需担心。但是导航菜单 active 效果会不见。不过我们已经把 el-menu-item 的 key 设置为路由的 name，那么我们只要在刷新后，在 afterEach 把当前路由的 name 赋值给 el-menu default-active 即可。同理，在 afterEach 阶段获取所有 matched 的路由，即可实现面包屑导航。
if (!store.state.permission.permissionList) {
store.dispatch('permission/FETCH_PERMISSION').then(() => {
next({ path: to.path })
})
}
...
router.afterEach((to, from, next) => {
var routerList = to.matched
store.commit('setCrumbList', routerList)
store.commit('permission/SET_CURRENT_MENU', to.name)
})
退出登陆后，需要刷新页面，因为我们是通过 addRoutes 添加的，router 没有 deleteRoutes 这个 api，所以清除 token, 清除 permissionList 等信息，刷新页面是最保险的。
最后还有一点，每次请求得带上token, 可以对axios封装一下来处理
var instance = axios.create({
timeout: 30000,
baseURL
})
// 添加请求拦截器
instance.interceptors.request.use(
function(config) {
// 请求头添加 token
if (store.state.UserToken) {
config.headers.Authorization = store.state.UserToken
}
return config
},
function(error) {
return Promise.reject(error)
}
)
/* axios 请求二次封装 /
instance.get = function(url, data, options) {
return new Promise((resolve, reject) => {
axios
.get(url, data, options)
.then(
res => {
var response = res.data
if (response.code === 0) {
resolve(response.data)
} else {
Message.warning(response.message)
/ reject(response.message) */
}
},
error => {
if (error.response.status === 401) {
Message.warning({
message: '登陆超时, 请重新登录'
})
store.commit('LOGIN_OUT')
window.location.reload()
} else {
Message.error({
message: '系统异常'
})
}
reject(error)
}
)
.catch(e => {
console.log(e)
})
})
}
export default instance