Vue导航守卫 -- 登录

一、了解vue的导航守卫：

导航守卫 | Vue Router (vuejs.org)

用户注册登录后通过token拿到用户信息，这时需要导航守卫进行获取：

二、具体使用：

//第一步：守卫拦截住，先去获取用户的token和用户的信息
  let token = store.state.user.token
  let userInfo = store.state.user.userInfo.name

  if(token){
    //如果token是存在的，代表用户登录过
    if(to.path === '/login'){
      //用户已经登录了，还要往登录页面去跳，没必要
      next('/')
    }else{
      // 如果用户已经登录了，但是跳转的不再是登录页，那么我们得看用户的信息获取了没有
      if(userInfo){
        //如果用户的信息已经获取,无条件放行
        next()
      }else{
        //用户已经登录，但是用户还没有获取用户信息，在这里就需要请求获取用户信息
        try {
          //如果获取用户信息成功，用户信息拿到就无条件放行
          await store.dispatch('getUserInfo') //用户根据token获取用户信息 
          next() 
        } catch (error) {
          //根据token获取用户信息失败，代表token可能过期
          //把用户的过期token给清理掉，重新跳转到登录页
          store.dispatch('clearToken')
          next('/login')
        }
      }
    }
  }else{
    //用户根本没登录，
    //目前我们什么都不做，直接放行，后面我们是需要添加功能的
    //如果用户访问的是 交易相关  支付相关 个人中心相关，那么跳转到登录页面
    let targetPath = to.path
    if(targetPath.indexOf('/trade')!==-1 || targetPath.indexOf('/pay')!==-1 || targetPath.startsWith('/center')){
      // next('/login') 这样写可以直接去到登录页，但是登录成功不会去到之前想去的地方
      next('/login?redirect='+targetPath) //想要回到之前想去的地方，必须把想去的那个路径给带到登录里面  
    }else{
      next()
    }
    
  }