vue中的导航守卫（路由守卫）运用

首先，了解什么是路由守卫，拿来做什么

在项目中，没次路由的切换或者页面的刷新都需要我们判断用户是否已经登录；

而vue-router提供了导航钩子：

全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，这两钩子函数会在路由即将改变前和改变后进行触发；

当然有全局的也有独享的，他需要在路由配置的时候进行配置；

还有组件路由守卫，他是写在每个单独的vue文件里面的路由守卫。

这里还要说到导航钩子提供的三个参数：

to：即将要进入的目标路由对象；

from：当前导航即将要离开的路由对象；

next ：只有在调用该方法后，路由才会改变，才能进入下一个钩子函数（afterEach）。

注意：

next()//直接进to 所指路由
next(false) //中断当前路由
next('/login') //跳转指定路由

1. 路由独享守卫

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // 需要的操作
            }
        }
    ]
})

2. 组件路由守卫

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
    // 离开当前路由页面时调用
}

3. 全局路由守卫

前置守卫：一般会用来判断用户是否登录，未登录则跳转登录页

router.beforeEach(async (to, from, next) => {
  clearHttpRequestingList();
  let sessionId = localStorage.getItem('sessionId') || '';
  NProgress.start();
  if (sessionId) { //已登录
    next()
  } else { //未登录定向到登录页面
    if( to.path == '/login') {
      next();
    } else {
      next('/login')
    }
  }
})

后置守卫：和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身

router.afterEach((to, from) => {
  // finish progress bar
  NProgress.done()
})

vue中的导航守卫（路由守卫）运用

猜你喜欢