localStorage 项目未在 axios 标头中更新

Question

我正在使用 JWT 令牌身份验证系统，当我登录时，我得到这样的令牌：

axios.post('/login', data)
    .then(response => {
        localStorage.setItem('token', response.data.token);
   });

这很有效，并且令牌保存在 localStorage 中。但是，令牌不包含在以后的请求中。在授权报头是Bearer null。

这就是我设置全局 axios 对象的方式。

window.axios = axios.create({
    baseURL: '/api/',
    timeout: 10000,
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
        'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
});

如果我刷新站点，则会设置令牌并正确使用。

编辑：

我通过Authorization从create()方法中删除标题并使用window.axios.defaults.headers.common['Authorization']. 但是现在Laravel Echo出现了同样的问题。我创建这样的实例：

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxx',
    cluster: 'eu',
    encrypted: true,
    namespace: 'xxx',
    auth: {
        headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token')
        }
    }
});

我像这样更新标题：

window.setAuthToken = (token) => {
    window.axios.defaults.headers.Authorization = 'Bearer ' + token;
    window.Echo.options.auth.headers.Authorization = 'Bearer ' + token;
    localStorage.setItem('token', token);
}

axios 头被成功更新，但不是 Echo。

Answer 1

为此使用 axios拦截器。它将为每个请求调用运行。

最好将 axios 方法保存在单独的文件中并调用它，而不是直接在所有组件中使用它。这样，如果我们愿意，我们可以用最小的努力用另一个库替换 axios。这是我在我的项目中所做的。

import axios from "axios";
import AuthService from "./auth";

import config from '../config'

const instance = axios.create({
  baseURL: config.apiServer.url,
  timeout: config.apiServer.timeout
});

instance.interceptors.request.use(
  config => {
    const token = AuthService.getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

const ApiService = {

  get(url) {
    return instance.get(url)
      .then(res => res)
      .catch(reason => Promise.reject(reason));
  },

  post(url, data) {
    return instance.post(url, data)
      .then(res => res)
      .catch(reason => Promise.reject(reason));
  },

  awaitAll() {
    return axios.all(Array.from(arguments))
      .then(axios.spread((...responses) => responses))
      .catch(reasons => Promise.reject(reasons));
  }

};

export default ApiService;

现在在组件中使用它：

ApiService.get(YOUR_GET_URL)
      .then(res => {
        Console.log(res);
      ))
      .catch(reason => {
        console.log(reason);
      })

Answer 2

问题是您localStorage.getItem('token')在页面加载时使用。当您在 中设置它时localStorage，您必须在 axios 标头中更新它。

window.axios = axios.create({
    baseURL: '/api/',
    timeout: 10000,
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
        'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
});

axios.post('/login', data)
    .then(response => {
        localStorage.setItem('token', response.data.token);
        window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    });

Answer 3

我之前遇到过同样的问题，我发现包含我的 axios 配置的文件是在存储令牌时加载的，因此它在存储之前访问它。

解决方案是，在 axios 配置中：

  const axiosInstance = axios.create({
  baseURL: `${API_BASE_URL}`,
  headers: {
    Accepted: 'appication/json',
    'Content-Type': 'application/json',
  },
});

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.authorization = token;
    }
    return config;
  },
  (error) => Promise.reject(error),
);

export default axiosInstance;

之后，在需要发出请求的地方使用该实例。