之前写了一篇 《vue 按钮级别权限控制实现》，里面介绍了前端页面对于按钮权限的控制，这一篇来说说前端页面对于菜单权限的控制。
前端菜单权限，就是根据用户的权限不同控制菜单的显示隐藏，不同的场景，实现的方式也有所不同。
一、前端控制路由
前端配置好一套通用路由表一套动态路由表，然后获取用户权限数据，根据权限数据对比动态路由表，生成具有用户权限的新路由表，然后使用 router.addRoutes方法将新路由表动态挂载到 router 上，最后根据路由表渲染菜单。
实现如下：
1、在 route.js 里面配置通用的路由（404，login 等）。
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
mode: 'hash',
routes:[{
path:'/',
redirect:'/login'
},{
path:'/login',
name:'login',
component: () => import('../view/login')
},{
path:'/404',
name:'404',
component: () => import('../view/404')
}]
})
export default router;
2、新建一个 routerList.js 文件，里面配置好动态路由表；通过 isShow 字段控制菜单的显示隐藏。
const routerList = [{
path:'/',
name:'home',
component: () => import('../view/index.vue'),
meta:{
title:'Home'
},
children:[{
path:'menu1',
name:'menu1',
isShow:true,
component: () => import('../view/menu1.vue'),
meta:{
title:'菜单1',
icon:'el-icon-info'
}
},{
path:'menu2',
name:'menu2',
isShow:true,
component: () => import('../view/menu2.vue'),
meta:{
title:'菜单2',
icon:'el-icon-info'
}
},{
path:'menu3',
name:'menu3',
isShow:true,
component: () => import('../view/menu3.vue'),
meta:{
title:'菜单3',
icon:'el-icon-info'
}
}]
}
]
3、获取接口返回权限数据。
//以数组为例
['menu1','menu3']
4、根据这个数组来处理已有的动态路由表，将数组里没有的菜单对应动态路由表里的路由的 isShow 属性值改为 false；生成的新路由表保存到 vuex 和 localStorage 里面。
const routerList = [{
path:'/',
name:'home',
component: () => import('../view/index.vue'),
meta:{
title:'Home'
},
children:[{
path:'menu1',
name:'menu1',
isShow:true,
component: () => import('../view/menu1.vue'),
meta:{
title:'菜单1',
icon:'el-icon-info'
}
},{
path:'menu2',
name:'menu2',
isShow:false,
component: () => import('../view/menu2.vue'),
meta:{
title:'菜单2',
icon:'el-icon-info'
}
},{
path:'menu3',
name:'menu3',
isShow:true,
component: () => import('../view/menu3.vue'),
meta:{
title:'菜单3',
icon:'el-icon-info'
}
}]
}
]
4、在 App.vue 文件的 created 生命周期使用 addRouters 方法将通过权限数据处理过的最新路由表加入到 router 里面去。
//处理好数据之后
this.$router.options.routes = routerList;
this.$router.addRoutes(routerList);
5、在路由切换时，通过路由守卫判断当前将要跳转的页面是否有权限，有正常跳转，没有则跳转到 404 页面。
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else if (to.path === '/404') {
next();
} else {
let resstr = ['menu1','menu3'];
if (resstr != 'null' && resstr != undefined) {
let hasPermiss = resstr.find(item => {
return item.includes(to.path.split('/')[to.path.split('/').length-1]);
})
if (hasPermiss) {
next();
} else {
next({
path: '/404'});
}
}
}
})
6、在菜单页面，使用 this.$router.options.routers 来获取最新路由对象，通过 v-for 循环渲染菜单栏，isShow 属性值为 false 的菜单不显示。
二、后端控制路由
路由表由后端维护好，通过接口前端拿到数据，然后使用 addRoutes方法添加到 router，最后根据路由表渲染菜单。
实现如下：
1、在 route.js 里面配置通用的路由（404，login 等）。
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
mode: 'hash',
routes:[{
path:'/',
redirect:'/login'
},{
path:'/login',
name:'login',
component: () => import('../view/login')
},{
path:'/404',
name:'404',
component: () => import('../view/404')
}]
})
export default router;
2、接口获取动态路由信息（与后端同时约定好数据的格式），这个时候只需要返回该用户有权限的路由表即可。
{
code:200
message:'查询成功'
success:true
data: {
router: [
{
path: "/",
component: "index",
name: "home",
meta: {
title: "Home"
},
children: [
{
path: "menu1",
name: "menu1",
component: "menu1",
meta: {
title: "菜单1",
icon: "el-icon-info"
}
}
]
}]
}
}
3、这里 component 是一个字符串，需要转换成路径，然后将处理好的数据保存到 vuex 和 localStorage 里面。
function filterRouter(routers) {
// 遍历后台传来的路由字符串，转换为组件对象
const accessedRouters = routers.filter(route => {
if (route.component) {
route.component = _import(route.component)
}
if (route.children && route.children.length) {
route.children = filterRouter(route.children)
}
return true
})
return accessedRouters
}
function _import (file) {
return () => import('../views/' + file)
}
4、在 App.vue 文件的 created 生命周期使用 addRoutes方法将通过权限数据处理过的最新路由表加入到 router 里面去。
//处理好数据之后
this.$router.options.routes = routerList;
this.$router.addRoutes(routerList);
5、在菜单页面，使用 this.$router.options.routers 来获取最新路由对象，通过 v-for 循环渲染菜单栏。
建议：处理好的路由表存到 localStorage 里的时候最好加密处理，防止用户通过本地修改。