Vue中的全局导航守卫

226 阅读1分钟

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

//如果跳转至登录界面则通过
    if (to.path == '/login') {
        next()
    }
    else {
//判断是否已经登录过(是否带有token值)
        if (localStorage.getItem('hmBack')) {
            next()
        }
        else {
            next('/login')

        }
    }
})

beforeEach钩子函数会在路由即将改变前触发。它具有三个参数: 1、to:即将前往的目标路由对象 2、from:当前要离开的路由对象 3、next:可以使用它跳转到目标路由。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。