在React中如何在登录后重定向到其他页面

通常，在构建 Web 应用程序时，一些页面在未登录前是限制访问的。 例如，对于博客平台，仪表盘可能仅供经过身份验证的用户访问。 如果未经身份验证的用户试图访问该页面，应用程序会将他们重定向到登录页面。 一旦他们登录，他们就可以访问。我们将研究如何将用户从受限页面重定向到登录页面。 我们还将讨论如何让用户在登录后返回到他们所在的页面。

创建React应用程序

在 React Router v6 中，有两种方法可以用来重定向用户 — Navigate 组件和 useNavigate 钩子，要查看它们是如何工作的，首先，使用 create-react-app 命令创建一个 React 应用程序。

npx create-react-app react-redirect

创建登录页面

您将需要创建一个登录页面来验证用户。 为简单起见，您将使用一组对象作为用户数据库。在 src 文件夹中创建一个新文件并将其命名为 Login.js。 然后添加以下代码，创建登录表单。

import { useState } from "react";
import Dashboard from "./Dashboard";

const Login = () => {
    const [username, setusername] = useState("");

    const [password, setpassword] = useState("");

    const [authenticated, setauthenticated] = useState(localStorage.getItem(localStorage.getItem("authenticated") || false));

    const users = [{ username: "Jane", password: "testpassword" }];

    const handleSubmit = (e) => {
        e.preventDefault()
        const account = users.find((user) => user.username === username);
        if (account && account.password === password) {
            setauthenticated(true)
            localStorage.setItem("authenticated", true);
        }
    };

    return (
        <div>
            <p>Welcome Back</p>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    name="Username"
                    value={username}
                    onChange={(e) => setusername(e.target.value)}
                />
                <input
                    type="password"
                    name="Password"
                    onChange={(e) => setpassword(e.target.value)}
                />
                <input type="submit" value="Submit" />
            </form>
        </div>
    )
};

export default Login;

这是一个简单的登录表单。 当用户提交他们的用户名和密码时，应用程序会将数据与数组数据进行比较。 如果用户详细信息在数组中，则应用程序将该用户的身份验证状态设置为 true。

由于将检查用户是否在仪表板组件中经过身份验证，因此您还需要将身份验证状态存储在其他组件可以访问的某个位置。 本文使用本地存储。 在实际应用中，使用 React context 会是更好的选择。

创建仪表盘页面

创建一个名为 Dashboard.js 的文件并添加以下代码以创建 Dashboard 组件。

const Dashboard = () => {
    return (
        <div>
            <p>Welcome to your Dashboard</p>
        </div>
    );
};

export default Dashboard;

只有经过身份验证的用户才能访问仪表盘。 因此，当用户访问仪表盘页面时，首先检查他们是否通过身份验证，如果没有，则将他们重定向到登录页面。为此，需要使用 React 路由器设置应用程序路由，通过 npm 安装 react-router-dom。

npm install react-router-dom

然后，在 index.js 中创建路由。

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";

import App from "./App";
import Login from "./Login";
import Dashboard from "./Dashboard";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route index element={<App />} />
                <Route path="login" element={<Login />} />
                <Route path="dashboard" element={<Dashboard />} />
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);

限制访问仪表盘页面

现在您的应用程序路由已设置，下一步是将仪表板路由设为私有。 当 Dashboard 组件加载时，它会从本地存储中检索身份验证并将其存储在状态中。 然后它检查用户是否已通过身份验证。 如果他们通过了身份验证，应用程序将返回仪表板页面，否则会将他们重定向到登录页面。

import { useEffect, useState } from "react";

const Dashboard = () => {
    const [authenticated, setauthenticated] = useState(null);
    
    useEffect(() => {
        const loggedInUser = localStorage.getItem("authenticated");
        if (loggedInUser) {
            setauthenticated(loggedInUser);
        }
    }, []);

    if (!authenticated) {
        // Redirect
    } else {
        return (
            <div>
                <p>Welcome to your Dashboard</p>
            </div>
        );
    }
};

export default Dashboard;

方法一：使用 Navigate 将用户重定向到登录页面

要重定向用户，您需要使用 Navigate 组件。 请注意，此组件取代了 React Router v5 中使用的重定向组件，从 react-router-dom 导入Navigate。

import { Navigate } from "react-router-dom";

然后按如下方式使用它来重定向未经身份验证的用户。

if (!authenticated) {
    return <Navigate replace to="/login" />;
} else {
    return (
        <div>
            <p>Welcome to your Dashboard</p>
        </div>
    );
}

Navigate 组件是一个声明式 API。 它依赖于用户事件，在这种情况下是导致状态更改并因此导致组件重新呈现的身份验证。 请注意，您不必使用 replace 关键字。 使用它会替换当前的 URL，而不是将其推送到浏览器的历史记录中。

方法二：使用 useNavigate() 将用户重定向到另一个页面

在 React 中执行重定向的另一个选项是 useNavigate 钩子。 此钩子提供对导航命令式 API 的访问。 首先从 react-router-dom 导入，登录后，使用 handleSubmit() 函数将用户重定向到仪表盘页面，如下所示：

import { useNavigate } from "react-router-dom";

const Login = () => {
    const navigate = useNavigate();

    const [username, setusername] = useState("");

    const [password, setpassword] = useState("");

    const [authenticated, setauthenticated] = useState(
        localStorage.getItem(localStorage.getItem("authenticated") || false)
    );

    const users = [{ username: "Jane", password: "testpassword" }];

    const handleSubmit = (e) => {
        e.preventDefault();
        
        const account = users.find((user) => user.username === username);
        
        if (account && account.password === password) {
            localStorage.setItem("authenticated", true);
            navigate("/dashboard");
        }
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    name="Username"
                    value={username}
                    onChange={(e) => setusername(e.target.value)}
                />
                <input
                    type="password"
                    name="Password"
                    onChange={(e) => setpassword(e.target.value)}
                />
                <input type="submit" value="Submit" />
            </form>
        </div>
    );
};

一旦用户提交了包含正确详细信息的表单，他们就会被重定向到仪表盘。 请注意，在创建应用程序时，目标之一是为用户提供最佳体验。 在这种情况下，在将用户重定向到登录页面之前将用户带回到他们所在的页面可以改善用户体验。 您可以通过传递 -1 来导航，navigate (-1) 来做到这一点。

在本文中，您了解了如何使用 Navigate 组件和 useNavigate() 挂钩将用户重定向到 React 中的另一个页面。 使用此信息为您自己的应用程序创建身份验证流程，您可以在其中将未经身份验证的用户从受保护页面重定向到登录页面。