Axios interceptor - how to return response from vuex store

Question

I have a login form. When a user enters username/pw the axios interceptor handles the response from the api, whether it's good or bad.

The response is then routed through my vuex store, where user credentials get set.

However, when I console.log the response in my Login component, I don't actually see the fields I need like data, status, headers etc.. I see this

Is there a way I can somehow validate that my data is in the store before proceeding to log the user in?

The only thing I can think of at this point is using a setTimeout for a 3 seconds and calling a state getter to retrieve user data.. I mean it works but I am sure there is a more appropriate solution out there

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 request 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 users login function

  @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 which calls the axios request from the vuex store

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

Estus Flask Estus Flask · Accepted Answer · 2020-03-06T11:40:04

login is async function, this means that it returns a promise, like the question describes.

Asynchronous control flow and promises in particular are contagious, this requires all callers that rely on it to use promises, too. Notice that login doesn't return anything so it cannot resolve to a response:

  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 interceptor - how to return response from vuex store

1 Answers