Ошибка с axios: TypeError: Невозможно прочитать свойство 'status' из неопределенного

Question

Хорошо, в моем index.js есть перехватчики для обновления токена, если код состояния 401, это работает нормально, но на странице входа в систему, если я возвращаю другой код состояния с сервера, сообщения об ошибках на странице не отображаются. работает, потому что перехватчики Axios не получают 401. Но если получит 401, перехватчики работают нормально.

Это скриншот об этом. Я возвращаю 404 с сервера, если не нашел пользователя

Ошибка связана с Login.vue, но если я удаляю axios.interceptors в моем index.js, «status» в Login.vue работает нормально.

перехватчики

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === undefined) {
    return;
  } else {
    const code = error.response.status;
    if (code === 401) {
      localStorage.removeItem("token");
      axios.get("token/refresh", {
        params: {
          correo: window.localStorage.getItem("email")
        }
      }).then(response => {
        var refresh_token = response.data.token;
        localStorage.setItem("token", refresh_token);
      }).catch(error => {
        const response = error.response;
        console.log(response.data.errors);
      })
      return Promise.reject(error);
    }
  }
});

Я пытался в перехватчиках использовать что-то вроде этого:

if(error.response.status == undefined) return;

но не работает.

Catch Login

          .catch(error => {
        this.loading = false;
        if (error.response.status != null) {
          switch (error.response.status) {
            case 400:
              this.alertError = true;
              this.errorMessage = "No estás autorizado para acceder.";
              this.loading = false;
              break;
            case 500:
              this.alertError = true;
              this.errorMessage =
                "Hay un problema con el servidor, disculpa las molestias.";
              this.loading = false;
              break;
            case 404:
              this.alertError = true;
              this.errorMessage = "Vuelve a ingresar tu contraseña";
              break;
            default:
              this.alertError = true;
              this.errorMessage =
                "Hay un error interno en el servidor, intenta de nuevo más tarde";
          }
        }
      })

Как с этим справиться?

Answer 1

Из вашей реализации вы пытаетесь обновить токен. Что вы можете сделать, это перенести обработку маркера обновления на серверную часть. Таким образом, если срок действия токена истекает, сервер отправит токен в заголовке, а внутри axios interceptors напишет код следующим образом, чтобы обновить локальное хранилище, когда заголовок содержит токен авторизации. Ниже приведен пример реализации моего стороннего проекта

export default () => {
const authTokenJson = localStorage.getItem('auth');

let axiosInstance = null;

if (authTokenJson) {
    const tokens = JSON.parse(authTokenJson);
    axiosInstance = axios.create({
        headers: {
            'authorization': `Bearer ${tokens.token}`,
            'refresh-token': `${tokens.refreshToken}`
        }
    });
} else {
    axiosInstance = axios.create();
}

axiosInstance.interceptors.response.use(
    response => {
        console.log(response);
        const tokens = {
            token: response.headers['authorization'],
            refreshToken: response.headers['refresh-token']
        };
        if (tokens.token && tokens.refreshToken) {
            setTokens(JSON.stringify(tokens));
        }
        return response;
    },
    err => {
        if (err.response.status === 401) {
            EventBus.$emit('errors:401');
        }
        return Promise.reject(err);
    }
);
return axiosInstance;
};