如何通过Axios将Token存入Local Storage并配置授权请求头

核心错误点 #

1. 未正确存储登录返回的Token：登录成功后没有将后端返回的Token存入LocalStorage，反而错误地读取字符串'LOCAL_STORAGE_API_KEY'对应的值（而非使用定义好的常量），导致无法获取有效授权Token。
2. Axios实例初始化存在缺陷：初始化时直接从LocalStorage读取Token，未登录状态下Token为null，会生成格式错误的Authorization头。
3. 请求头设置范围错误：仅针对post请求设置Authorization头，后续get等其他请求类型无法携带有效授权信息。

修复后的代码实现 #

1. 修正登录逻辑（loginActions）

import { instance } from './ApiProvider';
import { LOCAL_STORAGE_API_KEY } from '@/helpers/constants';

export const loginActions = async ({ email, password }) => {
  // 使用await简化异步逻辑
  const response = await instance.post('/api/v1/Auth/Login', {
    user: {
      email,
      password
    }
  });

  // 从响应中提取Token（请根据后端实际返回结构调整路径）
  const token = response.data.token;
  
  // 将Token存入LocalStorage
  localStorage.setItem(LOCAL_STORAGE_API_KEY, token);
  
  // 更新Axios实例的全局请求头，确保所有请求都携带Token
  instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;

  return response;
};

2. 优化Axios实例配置

使用请求拦截器动态注入Authorization头，避免初始化时Token不存在的问题：

import axios from 'axios';
import { LOCAL_STORAGE_API_KEY } from '@/helpers/constants';

export const instance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  validateStatus: () => true
});

// 添加请求拦截器，每次请求前动态设置授权头
instance.interceptors.request.use((config) => {
  const token = localStorage.getItem(LOCAL_STORAGE_API_KEY);
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

关键改进说明 #

• 请求拦截器的作用：确保每个请求发送前都会检查LocalStorage中的Token，动态注入授权头，避免初始化时Token缺失导致的无效请求。
• 全局请求头设置：使用headers.common而非headers.post，保证所有请求类型（GET/POST/PUT等）都能携带授权信息。
• 异步逻辑简化：用await替代链式then，提升代码可读性和可维护性。

内容的提问来源于stack exchange，提问作者Fernando Vasquez