电商项目-vue路由跳转的权限的限制

问题：在这个项目当中在进行页面跳转的时候是具有逻辑性的

①登录和未登录状态的不同页面的展示

②支付页面和支付成功的页面的展示是在用户去结算后才出现的，就是只能从购物车跳转到支付页面，支付成功页面也只能从支付页面进行跳转

③我的订单的页面也只能是登录后才能进入的

在这里使用了全局的路由前置守卫和路由独享守卫实现的，首先是通过token来判断是否已经登录成功，但是用户的信息使用Vuex进行存储的，不是持久性的存储，在页面跳转的时候用户信息有可能是不存在的，所以需要进行判断然后发送请求，在此期间token也是肯存在过期的情况，所以进行一个trycatch的捕获

一个比较重要的操作就是，比如当你没有登录的时候，点击我的订单进入登录页面，当你登录的成功的时候要进入我的订单的页面，如何保存之前的路径，通过传递query参数，然后通过query参数的判断进行跳转

// 设置全局前置路由守卫,什么条件下可以发生路由跳转
router.beforeEach(async (to,from,next)=>{
  // 首先看是否登录
  let token = store.state.user.token;
  let name = store.state.user.userInfo.userName;
  if(token)
  {
       if(to.path == '/login')
       {
         next('/')//重新定向，不去登录页面
       }
       else
       {
        //  用户的信息是否存在
         if(name){
              next();
         }
         else
         {
            //  进行一个信息的获取
          try {
            await store.dispatch('user/getUserInfo');
              // 获取信息成功后再放行
              next()
            } catch (error) {
              // 如果出现错误，则是token过期
              // 退出登录，重新登录
              store.dispatch('user/userLoginOut');
              next('/login')//回到登录页面
            }
         }
       }
  }
  else
  {
    // 未登录的情况是不能加入与交易相关的页面和支付页面的
      let toPath = to.path;
      if(toPath.indexOf('/trade')!=-1||toPath.indexOf('/pay')!=-1||toPath.indexOf('/center')!=-1)
      {
        // 进入登录页面，进入登录页面后，需要将用户本来想去的路径存在query参数
          next('/login?redict='+toPath);
      }
      else
      {
        next();
      }
     
  }
})

路由独享守卫，对跳转过来的路由的路径进行判断，然后是否进行通行

  {
        name:'pay',
        path:'/pay',
        component:Pay,
        // 设置组件内的路由守卫，只有从购物车过来才能进入支付页面
        beforeEnter: (to, from, next) => {
            let frompath = from.path;
            if(frompath == '/shopcart')
            {
                // 放形
                next();
            }
            else
            {
                // 阻断导航，从哪里过来就回哪里去
                next(false);
            }
        }

    },