通过将拦截器保存到 localStorage 获取 axios 响应答案

【问题标题】：Get axios response with interceptor saving to localStorage通过将拦截器保存到 localStorage 获取 axios 响应
【发布时间】：2017-10-26 12:20:04
【问题描述】：

编辑： 未记录的原因是有一个拦截器将身份验证标头保存到本地存储。我需要回复才能继续进行，以便我可以保存用户信息。我把拦截器代码放在了底部。

我正在使用 Vue2 和 Rails API 设置测试，但在使用 axios 记录响应时遇到了障碍。请求到达 API 并保存记录，当我在 Chrome 中查看时，我可以看到响应消息。

为什么这仍然将响应记录为未定义？

组件方法

methods: {
  submit() {
    const credentials = {
      email: this.credentials.email,
      user_name: this.credentials.user_name,
    };

    axios.patch(UPDATE_URL, credentials)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
    },
  },

来自 Chrome 的网络标签的响应

{
  "status":"success",
  "data": {
    "id":1,
    "email":"firstuser@example.com",
    "user_name":"padlsoaa",
    "provider":"email",
    "uid":"firstuser@example.com",
    "image":"https://randomuser.me/api/portraits/women/1.jpg",
    "created_at":"2017-10-21T09:45:27.077Z",
    "updated_at":"2017-10-26T12:00:56.864Z",
    "deleted_at":null
  }
}

编辑：拦截器保存在main.js

created() {
    axios.interceptors.request.use((config) => {
      config.headers.client = window.localStorage.getItem('client');
      config.headers['access-token'] = window.localStorage.getItem('access-token');
      config.headers.uid = window.localStorage.getItem('uid');
      config.headers['token-type'] = window.localStorage.getItem('token-type');

      return config;
    });

    axios.interceptors.response.use((response) => {
      if (response.headers.client) {
        localStorage.setItem('access-token', response.headers['access-token']);
        localStorage.setItem('client', response.headers.client);
        localStorage.setItem('uid', response.headers.uid);
        localStorage.setItem('token-type', response.headers['token-type']);
      }
    });
  },

【问题讨论】：

我不知道这是否重要，但我也尝试使用旧语法编写这些，以便它们与 GH 文档中的结果完全相同

标签： vue.js axios

【解决方案1】：

愚蠢的错误......你必须在拦截器中返回响应，否则它永远不会到达.then((response) => { }

axios.interceptors.response.use((response) => {
  if (response.headers.client) {
    localStorage.setItem('access-token', response.headers['access-token']);
    localStorage.setItem('client', response.headers.client);
    localStorage.setItem('uid', response.headers.uid);
    localStorage.setItem('token-type', response.headers['token-type']);
  }
  return response;
});

【讨论】：