如何解决Vue导航守卫报错：从'/'跳转至'/dashboard'时触发重定向问题

问题根因 #

你的attempt是异步Vuex action，原有代码调用该action时未等待执行完成就触发路由跳转，此时路由守卫校验auth/authenticated状态时，用户信息还未写入Vuex，校验不通过会被强制跳转回首页，两次跳转冲突就会抛出错误。此外你未给axios配置自动携带token的逻辑，二次登录时可能出现请求认证失败的问题。

修复步骤 #

1. 修改登录方法，等待异步action执行完成后再跳转

methods: {
    ...mapActions({
      attempt: "auth/attempt",
    }),
    // 给submit方法加async标识
    async submit(credentials) {
      axios
        .post("http://127.0.0.1:8000/api/login", credentials)
        .then(async (res) => { // 这里也要加async才能用await
          if (res.data.success) {
            // 加await等待attempt执行完成
            await this.attempt(res.data.token)
          }
          if (res.data.errors) {
            this.loginErrors = res.data.errors;
          } else {
            // 跳转前再校验一次认证状态，避免跳转失败
            if (this.$store.getters['auth/authenticated']) {
              this.$router.push({ name: 'dashboard' })
            }
          }
        })
        .catch((err) => {
          if (
            err.name !== "NavigationDuplicated" &&
            !err.message.includes(
              "Avoided redundant navigation to current location"
            )
          ) {
            console.log(err);
          }
        });
    },
},

2. 修改attempt action，配置axios全局携带token

async attempt({ commit, state }, token) {
  if (token) {
    commit('SET_TOKEN', token)
    // 给axios设置全局认证头，后续请求自动携带token
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  }
  if(!state.token) {
    return
  }
  try {
    const res = await axios.get('http://127.0.0.1:8000/api/user')
    commit('SET_USER', res.data)
  } catch (e) {
    commit('SET_TOKEN', null)
    commit('SET_USER', null)
    // 认证失败清除全局头
    delete axios.defaults.headers.common['Authorization']
  }
},

3. 补充退出登录逻辑的状态清理（如果你现有退出逻辑没加这部分）
   在你触发退出登录的mutation/action中添加以下代码：

// 清空token和用户信息
commit('SET_TOKEN', null)
commit('SET_USER', null)
// 清除axios全局认证头
delete axios.defaults.headers.common['Authorization']

修复后二次登录无需刷新页面即可正常跳转至dashboard。

内容的提问来源于stack exchange，提问作者D.D.