axios 错误：TypeError：无法读取未定义的属性“状态”

Question

index.js好的，如果状态代码为 ，我有一个拦截器来刷新令牌401，这工作正常，但是在登录页面中，如果我从服务器返回另一个状态代码，则页面中的消息错误不起作用，因为axios不接收A 401。

\n

但如果收到401，拦截器就可以正常工作。

\n

这是有关该内容的屏幕截图。404如果没有找到用户，它会从服务器返回 a 。\n

\n

该错误与 相关Login.vue，但如果我删除axios.interceptors我的index.js“状态”中的Login.vue，它就可以正常工作。

\n

拦截器

\n

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

\n

我尝试在拦截器中使用如下内容：

\n

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

\n

但这不起作用。

\n

登录捕捉

\n

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

\n

这要怎么处理呢？

\n

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;
};