NextJS前端对接Laravel后端：JWT认证请求头为空问题求助

你的问题核心在于Axios实例初始化时一次性设置的Authorization头不会自动更新，且NextJS的服务端渲染环境下无法访问localStorage，导致请求头始终是Bearer null。以下是具体解决方案：

1. 使用Axios请求拦截器动态添加Token #

替换你当前的api.js代码，通过请求拦截器在每次发起请求前动态获取最新的Token，确保每次请求都携带有效凭证：

import axios from "axios";

const api = axios.create({
    baseURL: "http://<server ip address>:8000/api/v1/",
});

// 请求拦截器：每次请求前注入最新Token
api.interceptors.request.use(
    (config) => {
        // 仅在客户端环境读取localStorage
        if (typeof window !== "undefined") {
            const token = localStorage.getItem("token");
            if (token) {
                config.headers.Authorization = `Bearer ${token}`;
            }
        }
        return config;
    },
    (error) => Promise.reject(error)
);

// 可选：响应拦截器处理Token过期
api.interceptors.response.use(
    (response) => response,
    (error) => {
        // 捕获401未授权，清除无效Token并跳转登录页
        if (error.response?.status === 401) {
            localStorage.removeItem("token");
            window.location.href = "/login";
        }
        return Promise.reject(error);
    }
);

export default api;

2. 确保组件在客户端渲染（针对NextJS 13+ App Router） #

如果你的组件使用了NextJS App Router，需要在使用useQuery的组件顶部添加'use client'指令，强制组件在客户端运行，这样才能访问localStorage：

'use client'; // 必须添加，确保组件在客户端渲染

import { useQuery } from '@tanstack/react-query';
import getUser from '@/path/to/getUser';

export default function UserProfile() {
    const {data, isLoading, isError, error, isSuccess} = useQuery("user", getUser);
    
    // 组件渲染逻辑...
}

为什么原代码失效？ #

• 原代码在Axios实例创建时就固定了Authorization头，登录后Token更新但实例头不会同步；
• NextJS服务端渲染阶段，localStorage不存在，导致初始化时token为null，后续请求一直沿用这个无效头。

内容的提问来源于stack exchange，提问作者Abhishek Prajapati