這是我的主要反應檔案：
// App.tsx
const App: FC = () => {
const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null;
return (
<BrowserRouter>
<Routes>
<Route path="/main" element={isLoggedIn ? <Main/> : <Navigate to='/login'/>}/>
<Route path="/about" element={isLoggedIn ? <About/> : <Navigate to='/login'/>}/>
<Route path="/login" element={<Login/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;
登錄后，我將用戶存盤在本地存盤中。
當用戶未通過身份驗證時（當它未存盤在 localstorage 中）時，我想實作重定向到 /login 頁面的行為。
通常，上述方法有效，但只是有時。有時，當我轉到'/main' 時，即使我已登錄，我也會被重定向到'/login'。我認為這是由 React 重新渲染的性質造成的。
我該如何解決這個問題？
uj5u.com熱心網友回復：
我猜第一次重定向到“/login”有效，您登錄，然后嘗試導航到“/main”或“/about”并被重定向回“/login”，直到您執行類似操作頁面重新加載并讀取任何持久的“logged_user”狀態，然后被卡住而不是注銷并被重定向回“/login”。
您應該將isLoggedIn值存盤在本地狀態中，從 localStorage 初始化，并在應用程式中提供一種切換狀態的方法。使用useEffect鉤子將本地狀態更改持久化回 localStorage。
例子：
const App: FC = () => {
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(
() => localStorage.getItem('logged_user') !== null
);
useEffect(() => {
localStorage.setItem('logged_user', JSON.stringify(isLoggedIn));
}, [isLoggedIn]);
const logIn = () => setIsLoggedIn(true);
// pass this callback to components you want to allow logging out
// it will update the local state and then get persisted
const logOut = () => setIsLoggedIn(false);
return (
<BrowserRouter>
<Routes>
<Route path="/main" element={isLoggedIn ? <Main/> : <Navigate to='/login'/>}/>
<Route path="/about" element={isLoggedIn ? <About/> : <Navigate to='/login'/>}/>
<Route path="/login" element={<Login onLogIn={logIn} />}/>
</Routes>
</BrowserRouter>
);
}
uj5u.com熱心網友回復：
我喜歡這樣做的方式是創建一個<PrivateLink />組件，以便很明顯嵌套的任何路由都需要經過身份驗證的用戶。
const PrivateRoute = (props: { children: React.ReactNode }): JSX.Element => {
const { children } = props
const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null;
const location = useLocation()
return isLoggedIn ? (
<>{children}</>
) : (
<Navigate
replace={true}
to="/login"
state={{ from: `${location.pathname}${location.search}` }}
/>
)
}
然后在你的 App.tsx
const App: FC = () => (
<BrowserRouter>
<Routes>
<Route path="/main" element={<PrivateRoute> <Main/> </PrivateRoute>}/>
<Route path="/about" element={<PrivateRoute> <About/> </PrivateRoute>}/>
<Route path="/login" element={<Login/>}/>
</Routes>
</BrowserRouter>
)
作為額外的附加功能，from傳遞給<PrivateRoute />組件中的狀態的變數允許您將用戶重定向回登錄后他們來自的任何頁面。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380632.html
標籤：javascript 反应 重定向 反应路由器 反应路由器-dom