這就是我根據用戶是否登錄來重定向用戶的方式。我只是在檢查這個例子中是否有 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 ？
我已經被這個問題困擾了一段時間了......
謝謝
uj5u.com熱心網友回復：
當您登錄時，您在全域狀態中設定一個變數 auth true 并將 localstorage.setItem("auth", true) 設定為類似。您需要了解私有路由和公共路由并定義私有路由和公共路由，當您登錄時，然后獲取 auth true 然后呼叫私有路由，否則呼叫公共路由。此時您再次從 localstorage.getItem("auth) 設定全域狀態") 因為當您重新加載此頁面時，本地存盤中的 auth 變數為 true，希望您理解謝謝
uj5u.com熱心網友回復：
所以這就是我如何解決我的問題。
可能不是最好的...
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
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/312255.html
上一篇：Python 計算機視覺（二） —— OpenCV 基礎
下一篇：手動實作影像濾波