Vue-62、Vue技术路由守卫

1、作用：对路由进行权限控制

2、分类：全局守卫、独享守卫、组件内守卫

3、全局守卫

//全局前置路由守卫 ----每次路由切换之前调用
router.beforeEach((to, from, next)=>{
    console.log("全局前置路由守卫被调用了");
    if (to.meta.isAuth) {//判断是否需要鉴权
        if (localStorage.getItem("school")==='xuexiao') {
            next();
        }else {
            alert("学习名不对。无权限查看")
        }
    }else {
        next();//放行
    }
});

//全局前置路由守卫 ----每次路由切换之后被调用
router.afterEach((to, from)=>{
    console.log("全局后置路由守卫被调用了");
    document.title = to.meta.title || '系统';
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4、独享路由守卫

 beforeEnter:(to,from,next)=>{
                        console.log("独享路由守卫被调用了");
                        if (to.meta.isAuth) {//判断是否需要鉴权
                            if (localStorage.getItem("school")==='xuexiao') {
                                next();
                            }else {
                                alert("学习名不对。无权限查看")
                            }
                        }else {
                            next();//放行
                        }
                    }
1
2
3
4
5
6
7
8
9
10
11
12

5、组件内路由守卫

//组件内路由守卫
        //通过路由规则，进入该组件时被调用
        beforeRouteEnter(to,from,next){
            console.log('app---beforeRouteEnter');
            //判断是否需要鉴权
            if (to.meta.isAuth){
                if(localStorage.getItem("scholl")==="atgugu"){
                    next();
                }else {
                    alert("学校名不对，无权查看");
                }
            } else {
                next();
            }

        },
        //通过路由规则，离开该组件时被调用
        beforeRouteleave(to,from,next){
            console.log('app---beforeRouteleave');
            next();
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21