Vue路由守卫
1. 路由守卫认识
- 作用： 对路由进行权限控制
- 分类： 全局守卫、独享守卫、组件内守卫
提示
其中路由配置中的meta属性可以用来添加数据信息标识是否需要校验权限, 另外如果不用meta属性可以用name属性，不过如果路由校验的比较多的话, 在if判断中写的很繁琐，建议使用meta属性，另外其他属性query,params是Vue自己进行传值用的，是不能用的
2. 全局守卫
js
// 全局前置守卫： 初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next)=>{
console.log('beforeEach', to, from)
if(to.meta.isAuth){
// 权限控制具体规则
if(localStorage.getItem('school')==='qinghua'){
next()// 放行
}else{
alert('暂无权限查看')
// next({name: 'guanyu'})
}
}else{
next() //放行
}
})
// 全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
console.log('afterEach', to, from)
if(to.meta.title){
document.title = to.meta.title
}else{
document.title = 'vue_test'
}
})3. 独享守卫
独享守卫就是只能给其中一个路由提供权限校验
js
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: 'news',
component: News
},
{
path: 'message',
component: Message,
beforeEnter(to, from, next){
if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='yinhai'){
next()
}else{
alert('暂无权限查看')
}
}else{
next()
}
},
children:[
{
path: 'detail/:id/:content',
component: Detail,
name: 'mingxi',
props: true
},
]
}
]
}
]4. 组件内守卫
主要用于和组件内部强耦合的代码逻辑处理，组件内守卫分为两个：beforeRouteEnter, beforeRouteLeave, 区别于全局前置后置守卫，前置后置守卫都是路由进入或者跳转都会被触发的，而组件内守卫根据时机不同，触发的组件内路由守卫不同。
js
routes: [
{
path: '/about',
component: About,
meta: {isAuth: true}
},
.....
]
vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: "About",
// 通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next){
console.log('About---beforeRouteEnter')
if(to.meta.isAuth){ // 判断是否需要鉴权
if(localStorage.getItem('schoole')==='北大'){
next()
}else{
alert('学校不对，无权限查看')
}
}else{
next()
}
},
// 通过路由规则, 离开该组件时被调用
beforeRouteLeave(to, from, next){
console.log('About---beforeRouteLeave')
next()
}
}
</script>
评论