【发布时间】：2022-01-04 18:05:36
【问题描述】：
我想在我的 react 应用中设置私有路由。我创建了两个组件。 ParivateRoute.js 和 ParivateRoute.js 我在 App.js 中导入这两个组件。我正在基于令牌设置私有路由，如果令牌存在，则设置私有路由，如果令牌为空，则应设置公共路由。
我尝试了一些代码，设置了我的私有路由，但没有设置我的公共路由。
我在公共路由中面临这个问题，每当登录表单（电子邮件和密码）的两个字段都是空的并且我点击登录按钮时，路径就会像这样http://localhost:3000/?email=&password=
虽然不应该这样。每当我点击登录按钮并且我的两个字段（电子邮件和密码）都是空的时，我希望路径是这样的 http://localhost:3000/。
所以我不知道如何获得它。我想 帮助正确设置路由路径。
请提供更多帮助，我还想在登录和注册等多个组件上设置公共路由。那我该怎么做呢？
下面是我的代码。
Login.js
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { useNavigate, Link } from "react-router-dom";
import RequireAuth from "./PrivateRoute";
const Login = ({ setTokenData }) => {
const initialValues = {
email: "",
password: "",
};
const [userData, setUserData] = useState(initialValues);
const authenticateUser = () => {
const localInfo = JSON.parse(localStorage.getItem("signUpUser"));
localInfo?.map((item) => {
const userName = item.email;
const userPassword = item.password;
if (userName === userData.email && userPassword === userData.password) {
console.log("success");
const token = Math.random().toString(36).substr(2, 5);
console.log("token is:", token);
sessionStorage.setItem("token", JSON.stringify(token));
setTokenData(token);
toUsersTable();
} else {
console.log("failure");
return false;
}
});
setUserData(initialValues);
};
const navigateToUsersTable = useNavigate();
const toUsersTable = () => {
return navigateToUsersTable("/usersTable");
};
return (
<>
<Form className="loginForm">
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
value={userData.email}
name="email"
onChange={(e) =>
setUserData({ ...userData, [e.target.name]: e.target.value })
}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
name="password"
value={userData.password}
onChange={(e) =>
setUserData({ ...userData, [e.target.name]: e.target.value })
}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox"></Form.Group>
<Button
variant="primary"
type="submit"
onClick={() => authenticateUser()}
>
Login
</Button>
<div className="txtToSignUpBtn">
<span>OR</span> <Link to="/signUp">Click here to Register</Link>
</div>
</Form>
<RequireAuth authenticateUser={authenticateUser} />
</>
);
};
export default Login;
PrivateRoute.js
import React from "react";
import { Route, Navigate, Routes } from "react-router-dom";
import Login from "./Login";
import UsersTable from "./UsersTable";
const PrivateRoute = ({ ...rest }) => {
console.log("rest is", { ...rest });
const token = JSON.parse(sessionStorage.getItem("token"));
console.log(token);
return (
<Routes>
<Route {...rest} element={token ? <UsersTable /> : <Navigate to="/" />} />
</Routes>
);
};
export default PrivateRoute;
PublicRoute.js
import React from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import Login from "./Login";
const PublicRoute = ({ ...rest }) => {
const token = JSON.parse(sessionStorage.getItem("token"));
return (
<Routes>
<Route
{...rest}
element={token ? <Navigate to="/usersTable" /> : <Login />}
/>
</Routes>
);
};
export default PublicRoute;
App.js
import { Layout } from "antd";
import React from "react";
import Login from "./Login";
import SignUp from "./SignUp";
import UsersTable from "./UsersTable";
import PublicRoute from "./PublicRoute";
import PrivateRoute from "./PrivateRoute";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
const App = () => {
return (
<>
<Layout>
<Router>
<Routes>
<Route element={<SignUp />} exact path="/signUp" />
</Routes>
<PublicRoute element={<Login />} exact path="/" />
<PrivateRoute element={<UsersTable />} exact path="/usersTable" />
</Router>
</Layout>
</>
);
};
export default App;
提前致谢。
【问题讨论】：
-
您的问题似乎存在一些问题，可能难以理解（两个组件都称为同一个文件，在同一个问题中提出多个问题等）。也就是说，您的代码示例非常清晰且很有帮助。我建议您查看this Medium post，因为它可能会引导您朝着正确的方向前进。
-
Dykotomee，感谢您的关注。我还从同一个 Medium 帖子中获得了帮助，以完成我的代码。
标签： javascript reactjs react-router react-router-dom