前言:
在我们vue路由配置中,因为权限等一系列问题,需要在路由这里配置限制条件 ,比如需要知道他登录那里是不是拿到了token,需要根据他的权限列表来配置前段展示路由等等
实例:
实现代码:
// 导航守卫,渲染动态路由
router.beforeEach((to, from, next) => {
let token = db.get('USER_TOKEN')
let user = db.get('USER')
let identity = user.identity
let name = user.name
let userRouter = db.get('USER_ROUTER')
if(whiteList.indexOf(to.path) != -1){
console.log("白名单")
next()
return
}
if(!token.length || !user){
websocketRequest.closeWebSocket();
next('/login');
return
}
console.log(userRouter)
//配置动态路由信息
let newRouter = null;
if(identity === "教师" || identity === "大学生"){
newRouter = teacherRouters;
}else if(identity === "学生"){
newRouter = studentRouters;
}else if(name === "管理员"){
newRouter = adminRouters;
}
if(store.getters.newRouter === newRouter)
next()
else{
router.addRoutes(newRouter) //添加动态路由
store.dispatch('routerAction',newRouter).then(res => {
next({ ...to })
}).catch(() => {
})
}
})