React express jwt，在哪里调用api来检查用户是否登录

Question

这是我如何重定向用户取决于他是否登录。我只是检查在这个例子中是否有一个cookie。

import { Route, Redirect } from "react-router-dom";
import cookies from "js-cookies";
export const PrivateRoute = ({ children, ...rest }) => {
const userSignedIn = () => {
return cookies.getItem("jwt");
};
return (
<Route
{...rest}
render={({ location }) =>
userSignedIn() ? (
children
) : (
<Redirect to={{ pathname: "/login", state: { from: location } }} />
)
}
></Route>
);
};

我正试图通过检查用户是否与我的后端登录来改进我的代码。

检查用户是否使用react express和JWT登录的正确方法是什么?我应该在哪里调用api ?

我已经被这个问题困扰了一段时间了…

感谢

Answer 1

登录时，将全局状态下的变量auth设置为true，并将localstorage.setItem("auth"， true)设置为true。你需要了解私有路由和公共路由并定义私有路由和公共路由，当你登录的时候，然后得到auth true然后调用私有路由，否则调用公共路由。在这一次，你再次设置全局状态从localstorage. getitem ("auth")，因为当你重新加载这个页面，然后auth变量true在localstorage，希望你理解，谢谢

Answer 2

我就是这样解决我的问题的。

可能不是最好的…

import { Route, Redirect } from "react-router-dom";
import { useEffect, useState } from "react";
import { Loading } from "../Loading/Loading";
import axios from "axios";
export const PrivateRoute = ({ children, isAuthenticated, ...rest }) => {
const [isLoading, setIsLoading] = useState(true);
const [isAuth, setIsAuth] = useState(false);
const getIsAuthenticated = async () => {
try {
const res = await axios.get("http://localhost:5000/api/user");
console.log(res);
setIsAuth(true);
} catch (error) {
console.log(error);
setIsAuth(false);
}
setIsLoading(false);
};
useEffect(() => {
getIsAuthenticated();
return () => {};
}, [isAuth]);
if (isLoading) {
return <Loading />;
}
return (
<Route
{...rest}
render={({ location }) =>
isAuth ? (
children
) : (
<Redirect to={{ pathname: "/login", state: { from: location } }} />
)
}
></Route>
);
};

后端代码

const user_GET = async (req, res) => {
res.status(400).send("wrong token");
//res.status(200).send("right token");// DEBUG
};