相信做过权限的同学对上面的内容还是有一些心得的，然后我们按照该有的步骤一步一步来，这些步骤在上面我的github中已经有了，大家可以对照一下。
1、全局导航守卫的设置，此处设置全局导航守卫，我觉得更多是为了数据持久化，大家都知道，vuex虽然非常好用，但是会有刷新丢失数据的情况，因此针对这种情况，我们使用导航守卫，每次刷新的时候，会重新请求后台的接口来获取角色信息。
if (store.getters.roles.length === 0) {
store
.dispatch('GetInfo')
.then(res => {
const roles = res.data.resultData && res.data.resultData.roles
store.dispatch('GenerateRoutes', { roles }).then(() => {
// 根据roles权限生成可访问的路由表
// 动态添加可访问路由表
router.addRoutes(store.getters.addRouters)
})
})
.catch(() => {
store.dispatch('Logout').then(() => {
next({ path: '/user/login', query: { redirect: to.fullPath } })
})
})
} else {
next()
}这里代码做了简化，主要给大家看下上面会有一个角色判断长度，主要是当我们不刷新的情况，页面角色信息不回丢失，因此我们也就没有必要去请求后台获取角色信息了，来节省请求数量。
2. 通过上面的代码可以看到，我们首先是请求的角色信息，然后请求了生成路由的GenerateRoutes的方法，方法是写在vuex中的action里面的，这部分的内容因为网上有很多教程，其实主要归纳一下，就是对路由进行递归过滤，过滤出符合角色的路由，然后将静态路由和过滤出来的动态路由链接起来
const permission = {
state: {
routers: constRouterMap,
addRouters: [] },
mutations: {
SET_ROUTERS: (state, routers) => {
state.addRouters = routers
state.routers = constRouterMap.concat(routers)
}
},
actions: {
GenerateRoutes({ commit }, data) {
//略
}
}
}3、设置我们的路由文件，这部分放到这里来说，主要因为这里还有个小坑，所以也是特地拿出来和大家分享一下
export const constRouterMap = [
{
path: '/',
redirect: '/index',
component: BasicLayout,
children: [
{
path: '/index',
name: 'index',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
meta: {
title: '仪表盘'
}
},
{
path: '/home',
name: 'home',
