vue router+vuex实现首页登陆验证判断逻辑

首页登陆逻辑要求在页面上判断是否获取到登陆token ，没有获取到则跳转到登陆页。登陆成功后，跳转到前一个页面。

1.vue router

路由判断首先咱们想到的是router.beforeEach 前置导航守卫 ，这个方法接受三个参数 to from next 。 to参数为即将跳转的路由路径，from为当前导航正要离开的路由，next方法用来resolve这个钩子。 下面以工做中写的一个判断为为例子：

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 若是是登陆页则用next方法resolve掉这个钩子，若是不是，进行到下一个判断
  return next();  //前端全栈学习交流圈：866109386
 }//帮助1-3年经验前端人员，突破技术瓶颈，提高技术思惟
 const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登陆的信息
 if (needLogin) {
  return next({  // 若是没有则跳转到登陆页，将当前路由路径放到参数中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});

2. this.$router 与 this.$route this.$router.push 与 this.$router.replace

在登陆页完成登陆请求后进行下面的操做 获取路径中存放前一个路径的参数 ,而后跳转到该页面

loginSuccess() {
  const { params: { back } } = this.$route;
  const route = back || { name: 'home' };
  const { name, params, query } = route;
  this.$router.replace({ name, params, query });
 },

在上面这段代码中出现了两个咱们常常混淆的概念: 咱们知道this.$router是router实例，能够用来直接访问路由。咱们称router配置中每个对象为一个路由记录，this.$route是暴露出来用来访问每一个路由记录的。所以咱们获取参数时使用的是this.$route 跳转路由时使用的是道this.$router。 上端代码中咱们使用了replace而不是push来跳转路由，这二者的区别是会不会在history中产生记录。replace不会新增记录，而是直接替换掉了这条路由记录。