Vue 路由拦截

路由拦截应用场景

图片.png

图片.png

如图所示，当我们进入一个webapp时，点到我的，表示进入个人中心，但是此时用户是首次使用的话，他是没有登录，这时候是不能直接跳转到个人中心页面的。我们希望他去登录页面登录以后在进行操作，这时就需要用到路由拦截。vue文档中称为导航守卫

具体使用

首先在路由定义时加入requireAuth:true

{
    path: '/systemNews',
    component: SystemNews,
    meta: {
      title:'系统消息',
      requireAuth: true //加在这里
    }
  }

配置好路由之后，使用vue导航守卫

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
      //if (store.state.token) {
      //  next();
      //}
      if (isLogin) {
          next();
      }else {
          next({
              path: '/login',
              query: {redirect: to.fullPath}
          })
      }
  }else {
      next();
  }
})

to.matched.some(record => record.meta.requireAuth) 
这个表示如果你在定义路由的时候requireAuth为ture则进行路由拦截

代码很简单，能直白的看出功能，isLogin表示用户是否登录，如果登录通过验证，就next()继续路由跳转，如果没有通过验证就跳转到登录页面，并且附加上要跳转的地址query: {redirect: to.fullPath}，以便登录后能自动会跳到原本要跳转的路由，也算小小的用户体验。当然你如果喜欢可用vuex来验证也行。