我想在用戶登錄時限制頁面路由

Question

我已經制作了一個應用程序，我正在使用 react-router-dom 實現路由。

所以場景是當用戶登錄時，他被重定向到localhost:3000/home url 並且主頁正在呈現。 當他注銷時，他將進入localhost:3000上的登錄頁面。

但是，如果用戶在登錄時將 url 更改為localhost:3000 ，那么一切都將變為空白並且他顯示為已登錄，我相信這是路由的默認行為。

要求是，即使他通過在瀏覽器中鍵入localhost來更改 url，也要將用戶重定向到主頁直到他登錄。

Answer 1

添加一個條件來檢查用戶是否登錄並使用來自 react-router-dom 的導航來重定向用戶。 將此添加到您的組件中

   return (
    { ("add condition here to check if user is login") ? (
        <Navigate to="/home " />
      ) : (<div>Component body</div>)
    }
    )

Answer 2

試試看，如果沒有登錄，則重定向到登錄頁面，然后登錄用戶重定向到登錄頁面。

 <HashRouter> {.auth.token && ( <Routes> <Route path="/" element={<Login />} /> <Route path="*" element={<Navigate to="/" />} /> </Routes> )} {auth token && ( <> <Routes> <Route exact path="/home" element={<Home />} /> <Route path="*" element={<Navigate to="/home" />} /> </Routes> </> )} </HashRouter>

Answer 3

您好，您的問題很容易解決，只需以這種方式構建您的路線：

<Route
    exact
    path="/login"
    render={() => {
    if (userLoggedIn) {
       return <Redirect to="/home" />;
    } 
    return <LoginPage />; 
    }}
/>

或者這樣做：

<Route
    exact
    path="/home"
    render={() => {
    if (!userLoggedIn) {
       return <Redirect to="/login" />;
    } 
    return <HomePage/>; 
    }}
/>

我希望這對您有所幫助，如果您需要任何其他澄清，請在下面的評論中提及我