ReactJS中修复AxiosError 401错误及Bearer Token配置方法

一、先解决登录时的401错误 #

你的代码里存在几个明显的问题，同时结合Postman正常的情况，按以下步骤排查：

1. 核对响应字段匹配 #

你的LoginServices里判断response.data.accessToken才存储用户信息，但Login组件里却取response.key存token，这是字段不匹配的问题。

• 打开Postman查看登录接口的返回JSON结构，确认后端返回的token字段到底是accessToken还是key；
• 比如如果Postman返回的是accessToken，组件里要改成const token = response.accessToken;；如果返回的是key，则LoginServices里的判断要改成response.data.key。

2. 校验请求参数名 #

确认后端登录接口接收的用户名、密码参数名是否为username和password。比如部分后端会用email代替username，或者passwd代替password，要和Postman里的请求参数完全一致。

3. 对齐请求头与Postman #

打开浏览器开发者工具（F12），查看Network面板里的登录请求头，和Postman里的请求头对比，补充缺失的字段。比如部分后端会校验X-Requested-With头，可在LoginServices的login请求中添加：

headers: {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'X-Requested-With': 'XMLHttpRequest'
}

二、设置Authorization: Bearer + access_token请求头 #

方法一：全局axios拦截器（推荐） #

创建axios实例并添加请求拦截器，自动给所有请求带上认证头，无需每个请求手动配置：

import axios from 'axios';
const API_BASE_URL = 'http://accrdet.localhost';

// 创建axios实例
const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

// 请求拦截器：自动注入Authorization头
api.interceptors.request.use(config => {
  const user = JSON.parse(localStorage.getItem('user'));
  if (user?.accessToken) { // 按实际存储的token字段调整
    config.headers.Authorization = `Bearer ${user.accessToken}`;
  }
  return config;
}, error => Promise.reject(error));

export default class LoginServices {
  login(username, password) {
    return api.post('/api/auth/login', { username, password })
      .then(response => {
        if (response.data.accessToken) {
          localStorage.setItem('user', JSON.stringify(response.data));
        }
        return response.data;
      });
  }

  logout() {
    return api.post('/api/auth/logout', {})
      .then(() => {
        localStorage.removeItem('user');
      });
  }

  getCurrentUser() { // 修正原方法名拼写错误
    return JSON.parse(localStorage.getItem('user'));
  }
}

方法二：手动给单个请求加头 #

如果仅个别接口需要认证，可在请求时手动添加：

// 示例：某个需要权限的接口请求
getUserProfile() {
  const user = this.getCurrentUser();
  return api.get('/api/user/profile', {
    headers: {
      Authorization: `Bearer ${user.accessToken}`
    }
  });
}

代码里的其他小问题修正 #

• geCurrentUser()方法名拼写错误，改为getCurrentUser()；
• Logout方法里localStorage.removeItem('user', JSON.stringify(response.data))错误，removeItem只需要传键名，改为localStorage.removeItem('user')；
• Login组件里的input name属性是usenrame，改为username规范代码。

内容的提问来源于stack exchange，提问作者Ahmed Meshaal