使用React的身份验证延迟

Question

前端使用React，后端使用Node.js，数据库使用Postgre。

我创建了自己的API来验证用户，并使用useState和useContext钩子来存储用户的登录状态。

成功登录后，我还设置了重定向功能，但useState需要一段时间才能更新用户的登录状态，因此页面没有被重定向。

在从服务器获取数据时，我尝试使用async和await，但在验证用户时仍然存在延迟。

我还试着关注一些像这样的博客

此上下文状态处理登录功能并更新组件内的登录状态。

import React, { createContext, useContext, useState } from "react";
import { GlobalContext } from "./GlobalState";
export const LoginAuth = createContext();
export const ProvideAuth = ({ children }) => {
const auth = useProvideAuth();
return <LoginAuth.Provider value={auth}>{children}</LoginAuth.Provider>;
};
export const useAuth = () => {
return useContext(LoginAuth);
};
const useProvideAuth = () => {
const [user, setUser] = useState(null);
const { setIsLogin } = useContext(GlobalContext);
const login = async (userDetails) => {
const response = await fetch("http://localhost:4000/api/v1/login/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(userDetails),
}).catch((err) => console.log(err.message));
const data = await response.json();
if (data?.error) {
setUser(false);
} else {
setUser(data);
setIsLogin(true);
}
};
return { user, login };
};

此状态用于更新整个应用的登录状态

import React, { createContext, useState } from "react";
export const GlobalContext = createContext();
export const GlobalProvider = ({ children }) => {
const [isLogin, setIsLogin] = useState(false);
return (
<GlobalContext.Provider value={{ isLogin, setIsLogin }}>
{children}
</GlobalContext.Provider>
);
};

专用路线代码

import React, { useContext } from "react";
import { Redirect, Route } from "react-router";
import { GlobalContext } from "../State/GlobalState";
const PrivateRouteLogin = ({ children, ...rest }) => {
const { isLogin } = useContext(GlobalContext);
return (
<Route
{...rest}
render={({ location }) => {
return isLogin ? (
children
) : (
<Redirect
to={{
pathname: "/login",
state: { from: location },
}}
></Redirect>
);
}}
/>
);
};
export default PrivateRouteLogin;

Answer 1

您可以为登录状态设置另一个值

false = not logged in
true = logged in
pending = for collect all data

在这种情况下，你可以有一个背景(加载(显示在你的网站上，直到检测到登录状态