Vue中的导航守卫（路由守卫）

路由首位使用场景：例如项目中的登录验证，权限管理。等等都需要进行路由跳转

对此，vue-router 提供的 beforeEach可以方便地实现全局导航守卫（navigation-guards）。

组件内部的导航守卫函数使用相同，只是函数名称不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。

官方文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

如何设置一个全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：就是在你router配置的下方注册

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

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

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

  • next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

一个简单实用的小例子：

const router = new VueRouter({ ... }) //这是路由配置，我就不多说了

const whiteList = ['/error', '/register/regindex', '/register/userauthent',  '/register/submit'] // 路由白名单
vueRouter.beforeEach(function(to,from,next){
  console.log("进入守卫");
  if (userInfo.user_id>0){
      console.log("登录成功");
      next();   //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
  }else{
      console.log("登录失败");
      getUserInfo.then(res => {
          if(res){
              if (res.user_id){
                  if (res.status == 4) {
                      //账号冻结
                      next({ path: '/error', replace: true, query: { noGoBack: true } })
                  }
                  if (res.status == 3) {
                      //认证审核中
                      next({ path: '/register/submit', replace: true, query: { noGoBack: true } })
                  }
                  next();  //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
              }else{
                  if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
                      next();  //记得当所有程序执行完毕后要进行next()，不然是无法继续进行的;
                  }else{
                      next({ path: '/register/regindex', replace: true, query: { noGoBack: true }})
                  } 
              }
              
          }
      }).catch(()=>{
          //跳转失败页面
          next({ path: '/error', replace: true, query: { noGoBack: true }})
      })
  }

});

export default router