什么是路由守卫?有什么用?

路由守卫是路由在跳转前、后过程中的一些钩子函数,这些函数可以让你操作一些其他的事,在后台管理中设置权限时经常看到,在实现路由跳转前校验是否有权限,有权限就可以通过,反之就会被执行其他操作,如返回首页。

路由守卫分为:全局守卫,组件守卫,路由独享

路由守卫参数:

to:目标路由对象

from:即将要离开的路由对象

next():放行

1.全局守卫:所有的路由切换都会执行,一般写在路由配置文件中

router.beforeEach(fn) :to\from\next()

router.afterEach(fn):to\from

router.beforeResolve(fn):to\from\next()

2.组件守卫:

beforeRouteEnter(fn):to\from\next() #在渲染该组件的对应路由被confirm前调用,不能获取组件实例,因此无法this

beforeRouteUpdate(fn):to\from\next()

beforeRouteLeave(fn):to\from\next()

3.路由独享守卫:一般写在路由配置中

beforeEnter(fn):to\from\next()

    router.beforeEach(function(to,from,next){
        if(to.matched.some(item=>item.meta.requiresAuth)){
            // 获取本地存储数据
            let userInfo = localStorage.getItem('userInfo') || {};
            try{
                userInfo = JSON.parse(userInfo)
            }catch(err){
                userInfo = {};
            }
            // 判断当前用户信息是否包含token
            if(userInfo.authorization){
                // 发起请求校验token的有效性
                request.get('/jwtverify',{
                    params:{
                        authorization:userInfo.authorization
                    }
                }).then(({data})=>{
                    if(data.code === 0){
                        next({
                            path:'/login',
                            query:{
                                // 跳转到登录页面,并传递目标页面路径
                                redirectTo:to.fullPath
                            }
                        });
                    }
                })
                next();
            }else{
                next({
                    path:'/login',
                    query:{
                        // 跳转到登录页面,并传递目标页面路径
                        redirectTo:to.fullPath
                    }
                });
            }
        }else{
            next();
        }
    });
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容