我正在尝试用React Router实现privateroute,当我第一次登录到我想要的特定页面时出现了一个问题,但是当我刷新页面时,即使登录也进入了登录页面。
我的路由器代码:
export default function PsyaRouter() {
const auth = useSelector((state) => state.auth);
return (
<Router>
<SnackbarProvider maxSnack={4} hideIconVariant={false}>
<Header>
<CustomSnackbar />
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/enterPhone">
<EnterPhone />
</Route>
<Route path="/enterCode">
<EnterCode />
</Route>
<PrivateRoute path="/assessment/create">
<AssessmentForm />
</PrivateRoute>
<PrivateRoute path="/assessment">
<Assessment />
</PrivateRoute>
<Route path="/users">
<Users />
</Route>
<Route path="/groups">
<Groups />
</Route>
<Route path="/not-found">
<NotFound />
</Route>
<Redirect to="/not-found" />
</Switch>
</Header>
</SnackbarProvider>
</Router>
);
}
这是我的privateroute实现:
export default function PrivateRoute({ children, ...rest }) {
const auth = useSelector((state) => state.auth);
// const { last_role_type: userType } = useSelector((state) => state.user);
useEffect(() => {
console.log("router auth obj: ", auth);
}, []); //auth
return (
<Route
{...rest}
render={(props) => {
return auth.isLoggedIn ? (
children
) : (
<Redirect
to={{
pathname: "/enterPhone",
state: { from: props.location },
}}
/>
);
}}
/>
);
}
刷新页面时,请重新安装整个应用程序,然后重新设置所有状态。要解决此问题,请使用localStorage或sessionStorage保留身份验证数据,然后在专用路由组件中获取它们以进行验证。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句