vue实现权限路由：
首先路由要分为两部分，一部分为所有人可见，一部分为根据权限动态挂载。
/**
* constantRoutes
* 所有权限通用路由表
* 如首页和登录页和一些不用权限的公用页面
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: {title: '首页', icon: 'dashboard'}
}]
},
/* 404 页面必须放在最后 !!! */
// {path: '*', redirect: '/404', hidden: true}
]
/**
* 异步路由表，权限控制显示
* @type {any}
*/
export const asyncRoutes = []
路由具体内容这里就不过多展示了。
大致思路就是通过beforeEach钩子拦截当前路由，并在一定条件下挂载异步路由
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// 设置网页标题
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// 如果已登录且跳转的页面是登录页，重定向到主页
next({ path: '/' })
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
} else {
try {
// 获取用户信息，获取到则加载权限路由否则抛出错误重定向到登录
await store.dispatch('user/getInfo')
if(store.getters.name){
store.dispatch('user/GenerateRoutes').then(res=>{
router.addRoutes([...res,{path: '*', redirect: '/404', hidden: true}])
next({...to})
})
}
} catch (error) {
// 删除token并且重新定向到登录页
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// 处于登录白名单的路由，直接跳转
next()
} else {
/**
* 其他没有访问权限的页面将被重定向到登录页面
* 登录成功之后将重定向到之前想跳转的页面
*/
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
上述例子挂载异步路由的条件时基于用户已登录，并且前端已拿到用户信息。用户信息里会有当前账户的权限，满足此条件后，调用vuex里的某个函数去处理并生成最终的路由表。
也可以不放在vuex中，例子中是因为要通过这个路由表去渲染导航，故就放在了vuex里集中管理。
拿到最终生成的路由表后，通过addRoutes函数，将异步路由表和基础路由表合并。并挂载。
这里有一个小细节，比如我们在登录后跳转到首页，首页是在基础路由表就存在的，所以我们这样做并无影响。
但是当我们在某个页面进行刷新操作的时候，此时钩子进入后的to对应的是刷新前的路由。
比如，我们在/user/userinfo路由下刷新页面，而恰好这个路由又是异步生成的，那么此时我们挂载好路由表后，而我们的基础路由里又刚好配置了404的路由；那此时就会重定向到404路由。
解决办法：
将404路由也放入异步路由表动态挂载，这样刷新页面后就不会重定向到404，而是会继续留在当前路由下
注意：router并不能获得addrouters添加进去的最新路由表，所以如果导航渲染的是router的数据那是没办法渲染出新的路由的，必须另外用一个变量存储整张新路由表