我使用以下功能限制對某些路線的訪問
function RequireAuth({ children, redirectTo }) {
const { user, setUser } = useContext(UserContext);
return user?.LoggedInStatus === "LoggedIn" ? children : <Navigate to={redirectTo} />;
}
它適用于反應路由器鏈接，
<Link to="/protected">protected</Link>
但是當我在地址欄中手動輸入 URL 并按 Enter 時，它會將登錄用戶重定向到登錄頁面
我使用 useContext 鉤子管理用戶狀態
export const UserContext = createContext(null);
在實際專案中，我從 API 獲取用戶登錄狀態
但我提供了一個示例用于測驗目的并設定用戶狀態如下：
function App() {
const [user, setUser] = useState({ LoggedInStatus: "LoggedOut" });
useEffect(() => {
setTimeout(() => {
setUser({ LoggedInStatus: "LoggedIn" })
}, 1000);
}, [])
我使用 react-route-dom v6 和路由如下
<UserContext.Provider value={{ user, setUser }}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/public" element={<PublicPage />} />
<Route
path="/protected"
element={
<RequireAuth redirectTo="/login">
<ProtectedPage />
</RequireAuth>
}
/>
</Routes>
</UserContext.Provider>
我也用 react-router-dom v5 測驗它，問題是一樣的
在某種程度上我可以理解這是因為 react 渲染頁面客戶端，并且在手動重新加載頁面時無法識別用戶狀態。
我們可以說它是 react.js 的性質，這不是問題嗎？（考慮到我們不能阻止用戶手動輸入 URL，這對我來說似乎是個問題）
如何解決這個問題呢？
uj5u.com熱心網友回復：
這里的問題是，您的初始user狀態似乎與已確認的未經身份驗證用戶的狀態相匹配，因此身份驗證包裝器在應用程式知道他們是否在后端進行身份驗證之前錯誤地將用戶重定向到登錄。
從既不是"LoggedIn"也不是的中間未定義狀態開始"LoggedOut"，并有條件地等待狀態/背景關系更新。
const [user, setUser] = useState({});
...
function RequireAuth({ children, redirectTo }) {
const { user, setUser } = useContext(UserContext);
if (user.LoggedInStatus === undefined) {
return null; // or loading indicator, etc...
}
return user.LoggedInStatus === "LoggedIn"
? children
: <Navigate to={redirectTo} replace />;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/412237.html
標籤：