如何实现登录后用户数据全局可访问且无需刷新加载？

问题核心原因 #

你的UserContext.js中，headers是在组件顶层定义的，初始化时会读取一次localStorage.getItem('token')的值（此时token为空）。登录成功后，虽然token已存入localStorage，但headers不会自动更新——因为组件没有重新渲染，fetchUserData调用时一直用的是初始化时的旧headers（空Authorization），导致后端请求失败，所以看不到console.log("UserContext.js", res.data)的输出。而刷新页面时，组件重新初始化，headers会读取到最新的token，请求才会成功。

修复方案 #

把headers的定义移到fetchUserData函数内部，这样每次调用refreshUserData时，都会重新读取localStorage中的最新token，生成有效的请求头：

修改后的UserContext.js代码：

import { createContext, useContext, useState, useEffect } from 'react';
import ApiClient from "./ApiClient";

const UserContext = createContext();

export const useUserContext = () => useContext(UserContext);

export const UserProvider = ({ children }) => {
    const [userId, setUserId] = useState('');
    const [name, setName]     = useState('');

    const fetchUserData = () => {
        // 每次调用都重新生成headers，确保拿到最新的token
        const headers = {
            "Accept": 'application/json',
            "Authorization": `Bearer ${localStorage.getItem('token')}`
        };
        ApiClient.get('get-user-data', {headers})
            .then(res => {
                console.log("UserContext.js", res.data);
                setUserId(res.data.UserID);
                setName(res.data.name);
            }).catch(err => {
            console.log(err);
        });
    }

    useEffect(fetchUserData,[])

    const contextValue = {
        userId,
        name,
        refreshUserData: fetchUserData
    };

    return (
        <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>
    );
};

额外检查点 #

确保登录接口返回token后，已将其存入localStorage，比如在Home.js的登录回调里补充：

ApiClient.post('/login', dataLogin)
    .then(resp => {
        // 新增：把返回的token存入localStorage
        localStorage.setItem('token', resp.data.token);
        refreshUserData();
        history.push('/gallery');
    }).catch(error => {
    console.log(error);
});

这样登录成功后，调用refreshUserData时就能用最新的token请求用户数据，你就能看到预期的console输出了。

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