这是我如何重定向用户取决于他是否登录。我只是检查在这个例子中是否有一个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 ?
我已经被这个问题困扰了一段时间了…
感谢登录时,将全局状态下的变量auth设置为true,并将localstorage.setItem("auth", true)设置为true。你需要了解私有路由和公共路由并定义私有路由和公共路由,当你登录的时候,然后得到auth true然后调用私有路由,否则调用公共路由。在这一次,你再次设置全局状态从localstorage. getitem ("auth"),因为当你重新加载这个页面,然后auth变量true在localstorage,希望你理解,谢谢
我就是这样解决我的问题的。
可能不是最好的…
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
};