React集成Keycloak：重定向后window.location显示旧路径问题

你的问题核心在于组件初始状态导致的提前路由跳转，具体原因和解决方法如下：

问题原因 #

1. 组件挂载时，authenticated初始值为false，组件会立即返回<Navigate to="/login" />，触发页面跳转到/login路由。
2. useEffect是在组件DOM渲染完成后才执行的，此时页面已经完成跳转，所以console.info(window.location)打印的是跳转后的/login地址，而非预期的/auth/callback。
3. 即使Keycloak认证成功，异步的getTokens函数还未执行完毕，组件已经完成首次渲染并触发了跳转，导致认证结果无法更新状态，最终还是会跳转到/login。

解决方案 #

1. 添加加载状态，避免提前跳转 #

将authenticated的初始值改为null（表示认证过程中），在认证完成前显示加载状态，不要直接跳转。

2. 处理认证异常 #

捕获keycloakClient.authenticate()的错误，避免因认证失败直接跳转，而是给出明确提示。

修改后的Callback组件代码：

const Callback = () => {
    const { keycloakClient } = useKeycloak();
    const [authenticated, setAuthenticated] = useState<boolean | null>(null); // null代表加载中

    useEffect(() => {
        console.info(window.location); // 现在会正确打印/auth/callback
        const getTokens = async () => {
            try {
                await keycloakClient.authenticate();
                setAuthenticated(keycloakClient.authenticated());
            } catch (error) {
                console.error('认证失败:', error);
                setAuthenticated(false);
            }
        };
        getTokens();
    }, []);

    // 认证过程中显示加载状态
    if (authenticated === null) {
        return <div>正在验证身份，请稍候...</div>;
    }

    if (authenticated) {
        setHeadersInterceptor(keycloakClient);
        return <Navigate to="/todolists" replace />;
    } else {
        // 认证失败时显示提示，而非直接跳转
        return (
            <div>
                <p>认证失败，请检查后重试</p>
                <button onClick={() => window.location.href = '/login'}>返回登录页</button>
            </div>
        );
    }
};

额外检查项 #

• 确认React Router路由配置正确，/auth/callback路由确实指向Callback组件，且没有被其他路由的通配符规则覆盖：

  <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/auth/callback" element={<Callback />} />
    <Route path="/todolists" element={<TodoLists />} />
  </Routes>
  

• 检查Keycloak客户端配置中的重定向URI是否准确设置为你的应用/auth/callback路径，避免拼写错误。

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