Axios 拦截器 - 如何 return 从 vuex store 响应

Question

我有一个登录表单。当用户输入 username/pw 时，axios 拦截器处理来自 api 的响应，无论是好是坏。

响应随后通过我的 vuex 存储进行路由，在该存储中设置用户凭据。

但是，当我 console.log 我的登录组件中的响应时，我实际上并没有看到我需要的字段，例如 data, status, headers 等。我看到了这个

在继续让用户登录之前，有什么方法可以以某种方式验证我的数据是否在商店中？

此时我唯一能想到的是使用 setTimeout 3 秒并调用状态 getter 来检索用户数据。我的意思是它有效，但我确信有更合适的解决方案

Login.vue

onClickLogin() {
    const userToLogin = {
      username: this.loginForm.username,
      password: this.loginForm.password
    };
    const response = UsersModule.login(userToLogin);

    console.log("response", response); // returns what is pictured in the image above so the if block is technically wrong
    if (response) {
      this.$router.push("/");
    }
  }

axios 请求class

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 5000
});

service.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    Message({
      message: error.message || "Error",
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

vuex用户登录功能

  @Action({ rawError: true })
  async login(usersSubmit: UserSubmit) {
    const response: any = await loginUser(usersSubmit);
    if (typeof response !== "undefined") {
      const { accessToken, username, name } = response;

      setToken(accessToken);
      this.SET_TOKEN(accessToken);
      this.SET_USERNAME(username);
      this.SET_NAME(name);
    }
  }

api class 从 vuex store 调用 axios 请求

export const loginUser = (data: UserSubmit) => {
  return request({
    url: "/auth/login",
    method: "post",
    data
  });
};

Answer 1

login 是 async 函数，这意味着它 return 是一个承诺，就像问题描述的那样。

异步控制流和承诺尤其具有传染性，这要求所有依赖它的调用者也使用承诺。请注意，login 没有 return 任何内容，因此它无法解析为响应：

  async onClickLogin() {
    const userToLogin = {
      username: this.loginForm.username,
      password: this.loginForm.password
    };

    try {
      await UsersModule.login(userToLogin);
      this.$router.push("/");
    } catch (err) {
      console.error('Login failed');
    }
  }

Axios 拦截器 - 如何 return 从 vuex store 响应

Axios interceptor - how to return response from vuex store

interceptor

typescript

vue.js

axios

vuex