如何在React Material UI的App Bar中展示其他文件的用户登录信息

方案一：使用localStorage快速实现 #

1. 在Login.js中保存邮箱到本地存储 #

登录成功后，把用户邮箱存入localStorage，在handleSubmit的成功回调里新增一行代码：

.then((res) => {
    localStorage.setItem('access_token', res.data.access);
    localStorage.setItem('refresh_token', res.data.refresh);
    localStorage.setItem('user_email', formData.email); // 新增：保存邮箱到localStorage
    axiosInstance.defaults.headers['Authorization'] =
        'JWT ' + localStorage.getItem('access_token');
    history.push('/');
}, reason =>{
    console.error(reason);
    setError("Invalid login details!")
    alert("Login Failed!\nIncorrect login details!");
});

2. 在Header.js中读取并显示邮箱 #

在Header组件内读取localStorage中的邮箱，同时处理未登录状态：

// Header.js组件内部
const userEmail = localStorage.getItem('user_email');

// 修改Typography标签
<Typography color='textSecondary' className={classes.userText}>
    {userEmail ? `当前登录：${userEmail}` : '未登录'}
</Typography>

方案二：使用React Context全局管理用户状态（更适合复杂应用） #

如果应用多处需要使用用户信息，推荐用Context统一管理：

1. 创建UserContext #

新建UserContext.js文件：

import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
    // 初始化时从localStorage读取已保存的邮箱
    const [userEmail, setUserEmail] = useState(localStorage.getItem('user_email') || '');

    // 登录时更新用户邮箱
    const loginUser = (email) => {
        setUserEmail(email);
        localStorage.setItem('user_email', email);
    };

    // 登出时清除用户信息
    const logoutUser = () => {
        setUserEmail('');
        localStorage.removeItem('user_email');
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
    };

    return (
        <UserContext.Provider value={{ userEmail, loginUser, logoutUser }}>
            {children}
        </UserContext.Provider>
    );
};

// 自定义Hook方便组件调用
export const useUser = () => useContext(UserContext);

2. 在App.js中包裹UserProvider #

确保整个应用能访问到用户状态：

import { UserProvider } from './UserContext';

function App() {
    return (
        <UserProvider>
            {/* 你的路由、Header等组件 */}
        </UserProvider>
    );
}

3. 在Login.js中更新用户状态 #

引入并调用Context的loginUser方法：

import { useUser } from './UserContext';

// Login组件内部
const { loginUser } = useUser();

// 修改登录成功回调
.then((res) => {
    localStorage.setItem('access_token', res.data.access);
    localStorage.setItem('refresh_token', res.data.refresh);
    loginUser(formData.email); // 更新全局用户邮箱
    axiosInstance.defaults.headers['Authorization'] =
        'JWT ' + localStorage.getItem('access_token');
    history.push('/');
}, reason =>{
    // 错误处理代码不变
});

4. 在Header.js中获取并显示邮箱 #

通过自定义Hook获取用户邮箱：

import { useUser } from './UserContext';

// Header组件内部
const { userEmail } = useUser();

// 修改Typography标签
<Typography color='textSecondary' className={classes.userText}>
    {userEmail ? `当前登录：${userEmail}` : '未登录'}
</Typography>

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