[JavaScript知识库]vue后台管理系统的路由守卫以及角色管理权限的限定

vue的路由守卫

像网络拦截器一样，当我们的请求发送一次就去拦截器中进行一次拦截，当符合一定条件允许这次请求的发送a.同理我们的vue路由也是如此监听我们的vue路由的更改,当满足我们的条件的时候我们允许此次的路由跳转,不满足的话将他替换掉

核心的函数是

router.beforEach((to,from,next)=>{})
to表示的我们将想要跳转的路由
from表示的是我们当前的路由
next表示的是允许进行跳转 但是当我们next("/login")表示的是跳转到login
使用代码：

//路由守卫
let whiteList=["login"]
router.beforeEach((to,from,next)=>{
    let token = store.state.token
    if(token){
        if(to.name=="login"){
            next("/home")
        }else{
            next()
        }
    }else{
        if(whiteList.includes(to.name)){
            next()
        }else{
            next("/login")
        }
    }
})

角色管理权限的设定

1.我们导出router路由模块是基本登录模块
2.然后配置好我们超级管理员路由模块和普通管理员模块
3.在我们登录页面中导入我们在router导出的普通管理员模块和超级管理员模块
4.然后通过我们对后台数据的中的角色权限进行设定

一、超级管理员

（1）当你是超级管理员模块的时候,我们通过使用router.addRoutes("超级管理员路由模块")
(2).因为我们要跨组件渲染数据所以需要使用vuex，然后通过this.$store.commit(“方法”.“超级管理员路由模块”)

二 、普通管理员模块

(1)当你是普通管理员的时候,然后同上的方法router.addRoutes("普通管理员路由模块")
(2)同上,因为需要跨组件通信所以我们需要使用vuex来保存数据