Vue3+router 路由导航守卫

最新推荐文章于 2024-06-12 21:11:22 发布

是小张呀！

最新推荐文章于 2024-06-12 21:11:22 发布

阅读量418

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_52099965/article/details/127477430

版权

全局前置守卫

router.beforeEach

to: Route，即将要进入的目标路由对象；
from: Route，当前导航正要离开的路由；
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

router.beforeEach((to, form, next) => {
    console.log(to, form);
    next()
})

案例权限判断

const whileList = ['/']
 
router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('token')
    //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
    if (whileList.includes(to.path) || token) {
        next()
    } else {
        next({
            path:'/'
        })
    }
})