React Context Provider无token时重定向报错，求正确实现方案

原代码的核心问题 #

• useEffect里仅引用了checkAuth函数名但未调用，导致认证逻辑从未执行
• token判断条件错误：localStorage.getItem("access_token")不存在时返回null而非空字符串，原判断无法覆盖token完全不存在的场景
• 未引入useNavigate钩子，无法实现页面跳转
• 直接调用jwt_decode未做错误捕获，token无效或不存在时会抛出异常

修复后的完整代码 #

import { createContext, useState, useEffect } from "react";
import jwt_decode from "jwt-decode";
import { useNavigate } from "react-router-dom"; // 引入路由跳转钩子

const UserContext = createContext({});

export const UserProvider = ({ children }) => {
    // 用单个state统一管理用户信息，简化状态维护
    const [user, setUser] = useState(null);
    const navigate = useNavigate(); // 初始化跳转方法

    function checkAuth() {
        const token = localStorage.getItem("access_token");
        // 同时处理token不存在、为空字符串两种场景
        if (!token) {
            navigate('/auth');
            setUser(null);
            return;
        }

        try {
            // 解码token时捕获异常，避免无效token导致页面报错
            const authData = jwt_decode(token);
            setUser({
                firstName: authData.firstname,
                lastName: authData.lastName,
                email: authData.email
            });
        } catch (error) {
            // 解码失败时清除无效token并跳转登录页
            console.error('Token解码失败:', error);
            localStorage.removeItem("access_token");
            navigate('/auth');
            setUser(null);
        }
    }

    useEffect(() => {
        checkAuth(); // 调用认证函数，确保组件挂载时执行校验
    }, []); // 空依赖数组，仅在组件首次挂载时执行一次

    return (
        <UserContext.Provider value={{ 
            user, 
            setUser,
            checkAuth // 暴露校验方法，方便登录后重新获取用户信息
        }}>
            {children}
        </UserContext.Provider>
    )
}

export default UserContext;

关键修改说明 #

• 添加路由跳转能力：从react-router-dom导入useNavigate，实现无权限时的页面重定向
• 完善token校验逻辑：用!token覆盖token不存在、为空字符串的所有未授权场景
• 增加错误捕获：用try-catch包裹jwt_decode，处理token无效或格式错误的情况，同时清理无效token
• 简化状态管理：将分散的用户信息字段合并为单个user state，提升代码可维护性
• 修复副作用执行：确保useEffect中调用checkAuth函数，且仅在组件挂载时执行一次认证检查
• 暴露校验方法：允许子组件在登录成功后调用checkAuth，重新加载用户信息

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