Amplify与react-router集成异常：/admin路由跳过认证表单

这不是两者不兼容，大概率是操作或状态缓存导致的问题，以下是排查和解决步骤：

1. 排查是否存在已登录会话缓存 #

withAuthenticator默认会保留用户的登录会话，如果之前单独访问Admin组件时完成过登录，浏览器会缓存认证状态，再次通过路由访问/admin时会直接进入组件：

• 测试方式：用浏览器隐私窗口打开/admin页面，看是否会弹出认证表单
• 清除缓存：手动清除浏览器的localStorage（找到amplify-开头的键删除），或者调用Auth.signOut()退出登录后再测试

2. 确认Amplify配置正确性 #

你的index.tsx里已在渲染路由前执行Amplify.configure(config)，这部分逻辑正确，但需确认aws-exports.js中的认证配置：

• 检查文件内的userPoolId、userPoolWebClientId是否和AWS控制台中Cognito用户池的信息完全一致
• 若使用第三方登录，确保oauth相关配置没有遗漏

3. 版本兼容性检查 #

确认@aws-amplify/ui-react和react-router-dom的版本匹配：

• 若使用react-router v6，@aws-amplify/ui-react版本需≥4.0.0，旧版本可能存在路由适配问题
• 执行npm list @aws-amplify/ui-react react-router-dom查看版本，不兼容则升级到最新稳定版

4. 手动添加路由守卫强化控制 #

如果需要确保未登录用户绝对无法访问/admin，可以自定义路由守卫组件，配合Amplify的认证状态检查：

// 创建ProtectedRoute.tsx
import { Navigate } from 'react-router-dom';
import { useAuthenticator } from '@aws-amplify/ui-react';

export default function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user } = useAuthenticator(context => [context.user]);
  
  if (!user) {
    // 未登录时重定向到首页，也可直接渲染登录表单
    return <Navigate to="/" replace />;
  }
  
  return <>{children}</>;
}

修改Router.tsx：

import ProtectedRoute from './ProtectedRoute';

export function Router(){
    return(
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<App/>}/>
                <Route path='/admin' element={
                    <ProtectedRoute>
                        <Admin/>
                    </ProtectedRoute>
                }/>
            </Routes>
        </BrowserRouter>
    )
}

5. 验证认证状态 #

在Admin组件中添加代码，手动检查当前用户的认证状态，帮助定位问题：

import { Auth } from 'aws-amplify';
import { useEffect } from 'react';

function Admin() {
  useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then(user => console.log('当前已登录用户:', user))
      .catch(err => console.log('未登录或认证失败:', err));
  }, []);
  
  // 原有组件内容...
}

打开浏览器控制台查看输出：如果显示已登录，说明是会话缓存导致直接进入（正常行为）；如果显示未登录但仍直接进入组件，说明withAuthenticator的配置或加载存在问题。

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