Vue + Axios 处理来自服务器的所有请求的错误

Question

我正在使用 Vue + Axios + Vue Router + Vuex。

我想在Vue中处理认证，登录后，用户可以做任何事情。但有时令牌会过期，服务器会报错 Code = 123。我想要的是，如果服务器给我 Code = 123，我想将用户重定向到登录页面。我可以检查 axios 的每个响应，但是它没有效果，因为有数百个 axios 请求会影响 .

问题：

如果服务器给出一些错误代码，如Code = 123，如何重定向？这发生在数百个 axios 响应中。

请注意：

它是服务器端检查，服务器可以撤销令牌等，因此前端无法防止令牌过期。
我不想在 axios 中手动编写数百个响应的检查。如果我能在一个地方处理它就太好了，所以如果我进行重构就很容易做到。

Answer 1

@thegrass，您可以在全局级别配置 axios 并在您的应用程序中访问 axios

全局配置使用请求、响应拦截器

来自应用程序的任何请求都将通过此请求拦截器，响应来自响应拦截器

如果您在响应拦截器中有逻辑说明响应代码是否为 123，则删除存储在客户端的访问令牌并将用户重定向到登录页面

请查找示例 axios 拦截器（您还可以阅读有关 vue js 应用程序中的 axios 全局拦截器设置的更多信息）

在axios-config.js文件中

import axios from 'axios';

const http = axios.create();

/* Response Interceptors */
const interceptResErrors = (err) => {
  try {
    // check for response code 123 and redirect to login
    err = Object.assign(new Error(), {message: err.response.data});
  } catch (e) {
    // check for response code 123 and redirect to login
    // Will return err if something goes wrong
  }
  return Promise.reject(err);
};
const interceptResponse = (res) => {
  try {
    // check for response code 123 and redirect to login
    return Promise.resolve(res.data);
  } catch (e) {
    // check for response code 123 and redirect to login
    return Promise.resolve(res);
  }
};
http.interceptors.response.use(interceptResponse, interceptResErrors);

/* Request Interceptors */
const interceptReqErrors = err => Promise.reject(err);
const interceptRequest = (config) => {
  return config;
};
http.interceptors.request.use(interceptRequest, interceptReqErrors);

export default http;

此文件导出 HTTP 客户端 axios 对象，您可以将其导入或挂载到 main.js / app.js 中的 Vue 实例，如下所述

从 axios-config.js

导入 http

Vue.prototype.$api = http;

在你的组件里面

this.$api.get('/some-api');

Vue + Axios 处理来自服务器的所有请求的错误

Vue + Axios handling error from server for all request

vue.js

vue-router

axios

vuex