我正在使用 AWS amplify UI React 在 React 应用程序中创建身份验证流程。我按照该文档并使用下面的文档制作了导航流程。
https://ui.docs.amplify.aws/react/guides/auth-protected https://ui.docs.amplify.aws/react/guides/auth-protected.
然而，登录后，我可以看到每次登录页面都会闪烁当我访问任何其他路线时。为了解决这个问题，我遵循了以下问题的答案之一。
身份验证登录页面闪烁 - useAuthenticator - React - Amplify Auth https://stackoverflow.com/questions/74075546/flicker-of-login-page-on-authentication-useauthenticator-react-amplify-aut.
不幸的是，现在页面始终停留在“正在配置”状态，并且授权状态永远不会改变。如何处理这种情况，以便在未经身份验证的情况下自动重定向到登录页面，并且在用户每次刷新页面时不显示登录页面？
注意：这个问题与放大用户界面与反应验证器.provider成分。
RequireAuth.tsx - all routes are wrapped inside this
import { useLocation, Navigate } from "react-router-dom";
import { useAuthenticator } from "@aws-amplify/ui-react";
import PageLoader from "../../components/loader/page-loader";
export function RequireAuth({ children }: any) {
const location = useLocation();
const { authStatus, user } = useAuthenticator((context) => [
context.authStatus,
]);
console.log("authStatus:::", authStatus);
console.log("user:::", user);
if (authStatus === "authenticated") {
return <>{children}</>;
} else if (authStatus === "unauthenticated") {
return <Navigate to="/login" state={{ from: location }} replace />;
} else if (authStatus === "configuring") {
return <PageLoader />;
} else {
return <Navigate to="/login" state={{ from: location }} replace />;
}
}
appRoutes 中的路由很少。
<Route
path="/"
element={
<RequireAuth>
<AppLayout />
</RequireAuth>
}>
<Route
index
element={
<RequireAuth>
<Home />
</RequireAuth>
}
/>
