Question

我在身份验证系统中遇到了一些问题，包括 React、React 路由器和 Redux。我使用 Laravel 作为后端并存储会话 Cookie。

一旦后端获取了认证用户成功响应，我将 authenticated : true 存储到 Redux 存储。整个过程运行良好，但每次刷新浏览器时，将重定向路由到 /login 页面几秒钟（后端响应时间），然后重定向回我尝试加载的身份验证路由。请帮我检查我的代码，谢谢。

认证路由组件

const AuthRoute: FC<Props> = ({ children, ...rest }): ReactElement => {
    const dispatch = useAppDispatch();
    const { authenticated } = useAppSelector((state) => state.auth);

    useEffect(() => {
        dispatch(FIND_AUTH_USER());
    }, [dispatch]);

    return (
        <Route
            {...rest}
            render={({ location }) =>
                authenticated ? children : <Redirect to={{ pathname: "/login", state: { from: location } }} />
            }
        />
    );
};

Auth Store Reducer

 addCase(FIND_AUTH_USER.fulfilled, (state, { payload }) => {
      return { ...state, authUser: payload, authenticated: true, loading: false };
 });

最好的问候

如何在 React 和 React 路由器中处理经过身份验证的路由

0 个答案: