vue-router路由守卫的理解

vue-router路由守卫的理解

路由守卫的作用

• 当我们路由切换到一个组件里面，如果没有权限，不让进入，有权限可以进入组件内部守卫

路由守卫的基本位置

• 主要分为全局的路由守卫和组件局部的路由守卫，但是我在使用的过程中，全局的路由守卫往往不起作用，甚至完全没有触发。但是局部却可以很好的使用，那我就说一下局部路由守卫的用法

组件局部路由守卫

• 在路由配置上直接定义 beforeEnter 守卫：

 path: '/xxx',
      component: xxx,
      beforeEnter: (to, from, next) => {
        // ...
      }

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

在beforeEnter 中使用to，from确定目标路由，然后通过判断一些条件让其调用next()，进行管道中的下一个钩子
注意：
确保 next 函数在任何给定的导航守卫中都被严格调用一次。

• 下面是我进入主页的验证，从sessionStorage获取username，对比是否符合标准，符合就允许进入。

path: '/stu/index',
        name: 'index',
        component: Index,
        beforeEnter: (to, from, next) => {
          console.log('hhhh')
          if (to.path === '/stu/index') {
            let username = sessionStorage.getItem('userName')
            if (username === null || username === '') {
              next({ name: 'login' })
              next()
              //调用两次，抵消效果
            } else {
              return next()
            }
          }
        }