Ax ios interceptor - как вернуть ответ из магазина vuex - PullRequest
Новая
       39

Ax ios interceptor - как вернуть ответ из магазина vuex

1 голос
/ 06 марта 2020

У меня есть форма для входа. Когда пользователь вводит имя пользователя / pw, перехватчик ax ios обрабатывает ответ от API, хороший или плохой.

Затем ответ направляется через мое хранилище vuex, где устанавливаются учетные данные пользователя.

Однако, когда я console.log отвечаю в своем компоненте Login, я фактически не вижу поля, которые мне нужны, например data, status, headers et c .. Я вижу это

response from vuex store after axios interceptor response

Можно ли как-то проверить, что мои данные находятся в хранилище, прежде чем войти в систему?

Единственное, о чем я могу подумать на данный момент, это использовать setTimeout в течение 3 секунд и вызвать средство получения состояния для извлечения пользовательских данных. Я имею в виду, что это работает, но я уверен, что есть более подходящий решение существует

Вход. 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("/");
    }
  }

ax ios класс запросов 

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-класс, который вызывает топор ios запрос из магазина Vuex 

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

1 Ответ

2 голосов
/ 06 марта 2020

login - это async функция, это означает, что она возвращает обещание, как описано в вопросе.

Асинхронный поток управления и, в частности, обещания заразительны, для этого требуется, чтобы все вызывающие абоненты полагались на него. используйте обещания тоже. Обратите внимание, что login ничего не возвращает, поэтому не может найти ответ: 

  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');
    }
  }
...