React应用未自动跳转至授权页面问题求助

核心问题 #

你的代码存在Context使用顺序错误：在AuthProvider还未渲染时就调用了useContext(AuthContext)，导致初始token为undefined，既触发控制台错误，也无法让AuthProvider正常启动登录流程。

修复方案（适配现有包） #

1. 调整组件结构，确保Context在Provider内部使用 #

将依赖AuthContext的逻辑拆分为AuthProvider的子组件，这样Context才能正确获取到Provider提供的值：

import "./i18n/config";
import { appTheme } from "./_Themes/theme";
import { AuthContext, AuthProvider, IAuthContext, TAuthConfig, TRefreshTokenExpiredEvent } from "react-oauth2-code-pkce";
import { Route, Routes } from "react-router-dom";
import { ThemeProvider } from "@mui/material";
import { useContext, useEffect } from "react";

// 拆分内部组件，在AuthProvider内部使用Context
function AppContent() {
    const { token, login } = useContext<IAuthContext>(AuthContext);

    useEffect(() => {
        // 未登录时主动触发登录流程，而非刷新页面
        if (!token) {
            login();
        }
    }, [token, login]);

    // 未登录时显示加载状态，避免空白页
    if (!token) {
        return <div>正在跳转登录...</div>;
    }

    return (
        <ThemeProvider theme={appTheme}>
            <Routes>
                <Route path="/" element={<Dashboard />} />
            </Routes>
        </ThemeProvider>
    );
}

function App() {
    const authConfig: TAuthConfig = {
        clientId: "test_client",
        authorizationEndpoint: "https://localhost:49178/connect/authorize",
        tokenEndpoint: "https://localhost:49178/connect/token",
        redirectUri: "https://localhost:3000",
        scope: "x",
        onRefreshTokenExpire: (event: TRefreshTokenExpiredEvent) => 
            window.confirm("会话已过期，是否刷新页面继续使用？") && event.login()
    };

    return (
        <AuthProvider authConfig={authConfig}>
            <AppContent />
        </AuthProvider>
    );
}

export default App;

2. 关键修复点说明 #

• 将Context的使用移到AuthProvider的子组件AppContent中，确保Provider已初始化后再获取Context值；
• 调用AuthContext提供的login()方法主动触发登录跳转，替代刷新页面的临时方案；
• 未登录时添加加载提示，优化空白页体验。

替代包建议 #

如果react-oauth2-code-pkce仍有问题，可以尝试以下方案：

• oauth2-pkce：轻量级PKCE实现库，手动控制登录流程，灵活性更高；
• 手动实现PKCE流程：通过window.location.href跳转授权端点，配合cryptoAPI生成code challenge，后端回调后获取token，适合自定义需求较多的场景。

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