這就是我想要做的。我從google得到一個JWT，暫時存盤在sessionStorage中，通過我的API發送，進行服務器端驗證。
這是我用來包裹受保護元素的受保護路線。像這樣
<Route element={<PrivateRouteClient />}>
<Route path="/CDashboard" element={<Client_dashboard /> }>
</Route>
import axios from 'axios';
import React, {useEffect, useState} from 'react';
import {Navigate} from 'react-router-dom';
import {Outlet} from 'react-router-dom';
function PrivateRouteClient() {
const [isAuth, setIsAuth] = useState(false);
axios.post('http://localhost:8080/something/something', {credential: sessionStorage.getItem("token")})
.then(function (res){
console.log(Boolean(res.data["UserAuth"]));
setIsAuth(Boolean(res.data["UserAuth"]));
console.log("hi");
return isAuth;
})
console.log(isAuth)
return isAuth ? <Outlet /> : <Navigate to="/login/Client" />;
}
export default PrivateRouteClient
而且我不能使路由異步，因為它會回傳一個承諾，這不是一個有效的 React 組件，它會拋出錯誤。無法完全弄清楚我在哪里做錯了！
感謝閱讀和幫助！
uj5u.com熱心網友回復：
有幾個問題，(1) 您發出 POST 請求是無意的副作用，(2) 代碼是異步的，而 React 組件的主體是同步的。
使用掛載useEffect鉤子發出 POST 請求并等待請求解決。使用中間isAuth狀態值來“保持”，直到 POST 請求以任何一種方式解決，無論用戶是否通過身份驗證。
function PrivateRouteClient() {
const [isAuth, setIsAuth] = useState(); // initially undefined
useEffect(() => {
axios.post(
'http://localhost:8080/something/something',
{ credential: sessionStorage.getItem("token") },
)
.then(function (res){
console.log(Boolean(res.data["UserAuth"]));
setIsAuth(Boolean(res.data["UserAuth"]));
return isAuth;
});
}, []);
console.log(isAuth);
if (isAuth === undefined) return null; // or loading indicator, etc...
return isAuth ? <Outlet /> : <Navigate to="/login/Client" />;
}
uj5u.com熱心網友回復：
所以德魯的回答對我幫助很大，謝謝！useEffect 是要走的路！
當我們運行這個代碼片段時，日志的“初始”值是“未定義”[這意味著 isAuth 的型別也是未定義的]。當我們運行 axios.post 時，isAuth 被設定為字串，而不是布林值，所以我們不能真正轉換為使用 Boolean() 方法。
function PrivateRouteClient() {
const [isAuth, setIsAuth] = useState();
console.log("initial")
console.log(isAuth)
useEffect(() => {
axios.post('http://localhost:8080/api/something',{credential: sessionStorage.getItem("token")}
).then(function (res){
console.log("setting IsAuth")
console.log(res.data["UserAuth"])
// console.log(Boolean(res.data["UserAuth"]));
setIsAuth(res.data["UserAuth"]);
return isAuth;
});
});
console.log(isAuth);
if (isAuth === undefined) return null; // or loading indicator, etc...
return isAuth==="true" ? <Outlet /> : <Navigate to="/login/Client" />;
}
在此處附上日志以供參考。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/412408.html
標籤：