如何使网站无法访问公共路由的情况下，用户登录在react-router-dom v6?

Question

祝你一切顺利!

我正在尝试react-router-domv6与公共和私有路由，这是我目前拥有的代码

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./user/pages/Login";
import { LoginRedirect } from "./auth/redirects/LoginRedirect";
import Home from "./shared/pages/Home";
import Authors from "./author/pages/Authors";
import Books from "./book/pages/Books";
import BookInformation from "./book/pages/BookInformation";
import CreateAuthor from "./author/pages/CreateAuthor";
import AuthorInformation from "./author/pages/AuthorInformation";
import { UserRoleRedirect } from "./auth/redirects/UserRoleRedirect";
import "./App.css";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="login" element={<Login />} />
<Route path="/" element={<LoginRedirect />}>
<Route path="/" element={<Home />} />
<Route path="authors" element={<Authors />} />
<Route path="books" element={<Books />} />
<Route path="books/:bookId" element={<BookInformation />} />
</Route>
<Route path="/" element={<UserRoleRedirect />}>
<Route path="authors/new" element={<CreateAuthor />} />
<Route path="authors/:authorId" element={<AuthorInformation />} />
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

这是我的LoginRedirect

的代码

import React from "react";
import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../useAuth";
export const LoginRedirect = () => {
const { user } = useAuth();
const location = useLocation();
if (user.email === "" || user.email === null || user.email === undefined)
return <Navigate to="/login" state={{ from: location }} replace />;
return <Outlet />;
};

和我的UserRoleRedirect

import React from "react";
import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../useAuth";
export const UserRoleRedirect = () => {
const { user } = useAuth();
const location = useLocation();
if (user.email === "" || user.email === null || user.email === undefined)
return <Navigate to="/login" state={{ from: location }} replace />;
if (user.roleType === "N")
return <Navigate to="/" state={{ from: location }} replace />;
return <Outlet />;
};

和我的页面工作正常;然而，我想使登录可访问只有当用户没有登录(我不使用任何后端，我只存储用户值在redux测试的目的)，主要是因为如果我想访问'/books'，我重定向用户到登录页面，如果他们没有登录和登录重定向他们到'/books'页面。但是，如果用户单击浏览器的后退按钮，我希望将他们返回到主页，而不是登录页面。

我尝试像其他路由一样包装登录路由，并添加了一个组件来测试是否登录重定向到"/"路径如下

import React from "react";
import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../useAuth";
export const AuthenticationRedirect= () => {
const { user } = useAuth();
const location = useLocation();
if (user.email !== "" && user.email !== null && user.email !== undefined)
return <Outlet />;
return <Navigate to="/" state={{ from: location }} replace />;
};

但是该组件无限地重新渲染并且不工作。

我可以在组件 中添加一个测试

if(user.email!=="")
return <Navigate to="/" />

但是我想看看是否有办法从路由本身管理它。

如何设置/login路由只能在用户未登录时访问?

Answer 1

基本思想是将需要身份验证的路由包装为自定义组件(下面示例中的PrivateRoute)。PrivateRoute将使用一些逻辑来确定用户是否经过身份验证，然后要么;允许请求的路由呈现，或者重定向到登录页面。

所附链接有答案https://stackoverflow.com/a/47476903/4563919