نحوه تغییر مسیر کاربر پس از ورود به React

یاد بگیرید که چگونه کاربر را از یک صفحه محدود شده به صفحه ورود هدایت کنید و پس از ورود دوباره به صفحه اصلی هدایت شوید.

معمولاً هنگام ساخت برنامه های وب، از صفحات لاگین برای محافظت از صفحات خصوصی استفاده می شود. به عنوان مثال، برای یک پلت فرم وبلاگ نویسی، داشبورد ممکن است فقط برای کاربران احراز هویت شده قابل دسترسی باشد. اگر یک کاربر احراز هویت نشده سعی کند به آن صفحه دسترسی پیدا کند، برنامه آنها را به صفحه ورود هدایت می کند. پس از ورود به سیستم، آنها دسترسی پیدا می کنند.

ما به نحوه هدایت کاربر از یک صفحه محدود به یک صفحه ورود خواهیم پرداخت. همچنین در مورد نحوه بازگرداندن کاربر به صفحه ای که پس از ورود به سیستم در آن بوده است صحبت خواهیم کرد.

یک React Application بسازید

در React Router نسخه 6، دو راه وجود دارد که می توانید برای تغییر مسیر یک کاربر از آن استفاده کنید – جزء Navigate و قلاب useNavigate().

برای مشاهده نحوه عملکرد آنها، ابتدا یک برنامه React با استفاده از دستور create-react-app ایجاد کنید.

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 انتخاب بهتری خواهد بود.

یک صفحه داشبورد ایجاد کنید

یک فایل با نام Dashboard.js ایجاد کنید و کد زیر را برای ایجاد کامپوننت داشبورد اضافه کنید.

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

داشبورد فقط باید برای کاربران احراز هویت شده قابل دسترسی باشد. بنابراین، زمانی که کاربران از صفحه داشبورد بازدید می‌کنند، ابتدا بررسی کنید که آیا احراز هویت شده‌اند یا نه، آنها را به صفحه ورود هدایت کنید.

برای انجام این کار، باید مسیرهای برنامه را با استفاده از روتر React تنظیم کنید، بنابراین react-router-dom را از طریق npm نصب کنید.

npm install react-router-dom

سپس در index.js مسیرها را ایجاد کنید.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
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>
);

از صفحه داشبورد محافظت کنید

اکنون که مسیرهای برنامه شما تنظیم شده است، گام بعدی این است که مسیر داشبورد را خصوصی کنید. هنگامی که مؤلفه داشبورد بارگیری می شود، احراز هویت را از حافظه محلی بازیابی می کند و آن را در حالت ذخیره می کند. سپس بررسی می کند که آیا کاربر احراز هویت شده است یا خیر. اگر آنها احراز هویت شوند، برنامه صفحه داشبورد را برمی گرداند در غیر این صورت آنها را به صفحه ورود هدایت می کند.

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 استفاده کنید. توجه داشته باشید که این کامپوننت جایگزین کامپوننت Redirect استفاده شده در React Router v5 شده است.

وارد کردن پیمایش از react-router-dom.

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 اعلامی است. این به یک رویداد کاربر متکی است، که در این مورد احراز هویت برای ایجاد تغییر حالت و در نتیجه باعث رندر مجدد مؤلفه است. توجه داشته باشید که لازم نیست از کلمه کلیدی جایگزین استفاده کنید. استفاده از آن جایگزین URL فعلی به جای فشار دادن آن به تاریخچه مرورگر می شود.

هدایت کاربر به صفحه دیگری با استفاده از useNavigate()

گزینه دیگر برای انجام ریدایرکت ها در React قلاب useNavigate() است. این قلاب دسترسی به API ضروری پیمایش را فراهم می کند. برای استفاده از آن، با وارد کردن آن از react-router-dom شروع کنید.

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

پس از ورود، کاربر را به صفحه داشبورد با استفاده از تابع handleSubmit () مطابق شکل زیر هدایت کنید:

const navigate = useNavigate();
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 انجام دهید تا به این صورت پیمایش کنید (-1).

مسیریابی در React

در این مقاله، یاد گرفتید که چگونه می توانید کاربر را با استفاده از کامپوننت Navigate و قلاب useNavigate به صفحه دیگری در React هدایت کنید. از این اطلاعات برای ایجاد یک جریان احراز هویت برای برنامه خود استفاده کنید که در آن کاربران احراز هویت نشده را از یک صفحه محافظت شده به صفحه ورود هدایت می کنید.

منبع مقاله