页面刷新后AuthContext状态变更问题求助（TypeScript环境）

页面刷新后AuthContext状态异常，核心原因是React组件刷新后会重新初始化，useState的初始值会回到undefined，且你未做状态持久化处理，再加上代码里存在冗余/错误点，以下是具体修复：

核心问题点 #

1. 状态未持久化：登录成功后未将用户信息存入本地存储，刷新后state直接重置为undefined
2. 冗余useEffect：空依赖的useEffect在组件挂载时user是undefined，根本不会执行内部逻辑，且就算执行也是重复设置相同的user，完全无效
3. 方法名拼写错误：singIn应为signIn，容易导致后续调用出错
4. 安全隐患：User类型包含密码，直接存本地会泄露敏感信息

修改后的完整代码 #

AuthContext 代码 #

import { createContext, ReactNode, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import bcrypt from 'bcryptjs'

export const AuthContext = createContext({} as AuthContextType);

// 完整用户类型（含敏感信息）
type User = {
    email: string;
    name: string;
    password: string;
    avatar: string;
}

// 本地存储用的用户类型（移除敏感密码字段）
type StoredUser = Omit<User, 'password'>;

type AuthContextType = {
    user: StoredUser | undefined;
    signIn: (userGet: User | undefined, password: string) => Promise<void>;
    signOut: () => void; // 新增退出登录方法
}

type AuthProviderProps = {
    children: ReactNode
}

export function AuthProvider(props: AuthProviderProps){
    // 组件初始化时从localStorage读取用户信息，自动恢复状态
    const [user, setUser] = useState<StoredUser | undefined>(() => {
        const storedUserStr = localStorage.getItem('authUser');
        return storedUserStr ? JSON.parse(storedUserStr) : undefined;
    });

    const navigate = useNavigate();

    async function signIn(userGet: User | undefined, password: string) {
        if(!userGet){
            // 用户不存在的处理逻辑
            alert('用户不存在');
            return;
        }
        
        // bcrypt密码验证逻辑
        const isPasswordValid = await bcrypt.compare(password, userGet.password);
        if (isPasswordValid) {
            // 登录成功：仅存储非敏感信息到本地
            const { password: _, ...storedUser } = userGet;
            localStorage.setItem('authUser', JSON.stringify(storedUser));
            // 更新上下文状态
            setUser(storedUser);
            // 跳转到目标页面
            navigate('/');
        } else {
            // 密码错误处理
            alert('密码错误');
        }
    }

    // 退出登录：清除状态与本地存储
    function signOut() {
        setUser(undefined);
        localStorage.removeItem('authUser');
        navigate('/login');
    }

    return(
        <AuthContext.Provider value={{user, signIn, signOut}}>
            {props.children}
        </AuthContext.Provider>
    );
}

其他代码无需修改 #

• Context Hook代码保持原样即可
• 路由配置代码保持原样即可

关键修改说明 #

1. 状态持久化：通过useState的初始化函数读取localStorage，组件挂载时自动恢复登录状态
2. 敏感信息隔离：用Omit<User, 'password'>定义存储类型，避免密码泄露
3. 移除冗余代码：删掉了原空依赖的useEffect，消除无效重渲染
4. 完善状态管理：新增退出登录方法，保证状态与本地存储同步清理

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