如何在MERN应用中向受保护API接口传递LocalStorage中的Token请求头

嘿，我仔细看了你的代码，其实你已经找对了核心方向——从LocalStorage取出Token并通过请求头传递给后端，但有几个细节可以调整得更严谨、更高效，让我一步步帮你梳理：

一、当前代码的修正点 #

你的getBooks函数已经在尝试传递Token了，但有个小细节可以优化：统一使用你定义的jwtString常量，避免手动拼写字符串导致的潜在错误，同时增加错误处理让逻辑更健壮。

修改后的getBooks函数：

import axios from "axios";
import { useState, useEffect } from "react";
const jwtString = 'jwtlibraryyt'; // 确保这个常量在组件内可访问

const Books=()=> {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    getBooks();
  },[])

  async function getBooks(){
    const token = localStorage.getItem(jwtString);
    if(!token){
      // 这里可以添加未登录的处理逻辑，比如跳转到登录页
      console.log("用户未登录，请先登录");
      return;
    }
    try {
      const response = await axios.get('http://localhost:3001/books',{
        headers: { 
          token: token // 直接用变量，避免重复拼写字符串
        }
      });
      setBooks(response.data);
    } catch (error) {
      // 统一处理请求失败的情况，比如Token过期、服务器错误
      console.error("获取书籍列表失败:", error.response?.data?.message || error.message);
      // 若检测到Token失效，清除本地存储并跳转登录页
      if(error.response?.status === 401){
        localStorage.removeItem(jwtString);
        window.location.href = "/login";
      }
    }
  }

  // 组件其余渲染逻辑...
}

二、进阶优化：全局配置Axios请求头 #

如果你的应用中有很多受保护路由，每次手动写headers会很繁琐。可以创建一个Axios实例，全局配置Token请求头，让所有请求自动带上Token：

1. 创建axiosInstance.js文件统一管理请求：

import axios from "axios";
const jwtString = 'jwtlibraryyt';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3001', // 统一设置后端基础URL
});

// 请求拦截器：发送请求前自动添加Token
axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem(jwtString);
    if (token) {
      config.headers.token = token; // 和后端取Token的键保持一致
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器：统一处理错误，比如Token过期
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem(jwtString);
      window.location.href = "/login";
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

2. 在组件中使用这个实例：

import axiosInstance from "./axiosInstance";
// ...
async function getBooks(){
  const token = localStorage.getItem(jwtString);
  if(!token){
    console.log("用户未登录，请先登录");
    return;
  }
  try {
    const response = await axiosInstance.get('/books'); // 无需手动添加headers
    setBooks(response.data);
  } catch (error) {
    console.error("获取书籍列表失败:", error.response?.data?.message || error.message);
  }
}

三、后端代码确认 #

你的后端verifyToken函数逻辑是正确的，它从req.headers["token"]获取Token，只要前端请求头里的键是token，就能正常匹配验证。

小建议：后端的SECRET密钥不要直接硬编码在代码里，建议用环境变量（比如process.env.JWT_SECRET）配置，提升安全性。

内容的提问来源于stack exchange，提问作者Dips Pad