问题：点击登录后没有跳转到指定页面

原因：还未将token存入vuex，页面就跳转了

首先，调后端接口无误，但无法正确跳转到主页面

这部分用到了前置路由守卫beforeEach，以下为路由守卫的逻辑：

1. 获取token，if（to.path === "/login"）就跳转到users主页面
2. 如果没有获取到token，就回到login登录页

vuex中存储token的代码：

再看登录函数的代码（错误版本）：

const handleLogin = () => {
  loginFormref.value.validate(async (valid) => {
    if (valid) {
      // 将token存入vuex 
      store.dispatch('app/login', loginForm.value)
      router.push('/users');
    } else {
      console.log('表单验证失败，无法提交');
      return false;
    }
  });
};

分析问题：

**产生问题：点击登录未跳转到指定页面

**问题逻辑：

1. 点击登录，首先执行路由守卫，正常情况下是获取到token，控制台打印存token，再打印2。

2. 但由于未获取到token就跳转了，所以第一行111111后未打印token，并且打印了3和5，依旧停留在login登录页；

**问题原因：dispatch是一个异步操作，用于触发一个action，返回一个Promise对象；当使用store.dispatch('app/login', loginForm.value)时，实际上是在发起一个异步操作来获取数据，如果不处理异步，则会出现还没请求完毕，就调用了push方法的情况。

**问题总结：还未将token存入vuex，就执行router.push('/users');

**解决问题：当调用action时，可以使用async和await方法；也可以使用.then()和.catch()方法来处理异步操作；

正确版：

方法一：store.dispatch('app/login', loginForm.value)前加await，保证push方法在接口请求完毕之后再触发

const handleLogin = () => {
  loginFormref.value.validate(async (valid) => {
    if (valid) {
      // 将token存入vuex 
      await store.dispatch('app/login', loginForm.value)
      router.push('/users');
    } else {
      console.log('表单验证失败，无法提交');
      return false;
    }
  });
};

方法二：使用.then()和.catch()方法

const handleLogin = () => {
  loginFormref.value.validate(async (valid) => {
    if (valid) {
      // 将token存入vuex 
      store.dispatch('app/login', loginForm.value).then(e => {
        console.log(e)
        router.push('/users');
      }).catch(e => {
        // app/login中reject啥，这里就返回啥
      }); 
    } else {
      console.log('表单验证失败，无法提交');
      return false;
    }
  });
};

处理后：打印存token后，再打印获取到的token，并打印2，跳转到users主页面