Реалізація авторизації та захищених маршрутів в React.js

3 Березня 2024 в 14:37 42

Питання авторизації та захищених маршрутів в React.js є актуальним для багатьох розробників. Забезпечення доступу до різних частин додатку в залежності від ролі користувача вимагає вдосконалених рішень. У цій статті ми розглянемо практичний підхід до вирішення цього завдання з використанням React.js.

App.jsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import RootLayout from "./root/RootLayout";
import Home from "./pages/Home";
import Error from "./Error/Error";
import ContactUs from "./pages/ContactUs.jsx";
import NewLogin from "./pages/NewLogin.jsx";
import { loader as tokenLoader } from "./util/auth.js";
import { action as authAction } from "./pages/NewLogin.jsx";
import { action as logoutAction } from "./pages/Logout.js";
import Nutrition from "./health/Nutrition.jsx";
import HealthAwareness from "./health/HealthAwareness.jsx";
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <Error />,
    id: "root",
    loader: tokenLoader,
    children: [
      { path: "", element: <Home /> },
      { path: "health-awareness", element: <HealthAwareness /> },
      { path: "ca", element: <Nutrition /> },
      { path: "contact-us", element: <ContactUs /> },
      { path: "logout", action: logoutAction },
    ],
  },
  { path: "login", element: <NewLogin />, action: authAction },
]);
export default function App() {
  return <RouterProvider router={router} />;
}
RootLayout.jsx
import { Outlet } from "react-router-dom";
import NewNavbar from "../components/NewNavbar.jsx";
export default function RootLayout() {
  return (
    <>
      <NewNavbar />
      <main>
        <Outlet />
      </main>
    </>
  );
}
Authentication handling is in NewLogin.jsx
import { json, redirect } from "react-router-dom";
import LoginForm from "../components/LoginForm";
export async function action({ request }) {
  const data = await request.formData();
  const authData = {
    username: data.get("username"),
    password: data.get("password"),
  };
  const response = await fetch("http://localhost:3000/auth/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(authData),
  });
  if (response.status === 400) {
    return response;
    //throw json({ message: "invalid data" }, { status: 400 });
  }
  if (!response.ok) {
    throw json(
      { message: "Could not authenticate this user." },
      { status: 400 }
    );
  }
  const resData = await response.json();
  const token = resData.token;
  localStorage.setItem("token", token);
  console.log(token);
  return redirect("/");
}
auth.js
export function getAuthToken() {
    const token = localStorage.getItem('token');
    return token;
}
export function loader() {
    return getAuthToken();
}
Logout.js
import { redirect } from "react-router-dom";
export function action() {
    localStorage.removeItem('token');
    return redirect('/');
}
NewNavbar.jsx
function logoutHandler() {
    const proceed = window.confirm("Are you sure؟");
    if (proceed) {
        submit(null, { action: "/logout", method: "post" });
    }
}
const token = useRouteLoaderData("root");
//inside the navbar
{!token && (
            <li
              className={`hidden md:block list-none text-[23px] p-6 hover:animate-pulse ${
                isScrolled ? "text-emerald-800" : "text-slate-100"
              }`}
            >
              <NavLink to="/login">login</NavLink>
            </li>
          )}
          {token && (
            <li
              className={`hidden md:block list-none text-[23px] hover:animate-pulse p-6 ${
                isScrolled ? "text-emerald-800" : "text-slate-100"
              }`}
            >
              <Form action="/logout" method="post">
                <button onClick={logoutHandler}>logout</button>
              </Form>
            </li>
          )}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

App.jsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import RootLayout from "./root/RootLayout";

import Home from "./pages/Home";

import Error from "./Error/Error";

import ContactUs from "./pages/ContactUs.jsx";

import NewLogin from "./pages/NewLogin.jsx";

import { loader as tokenLoader } from "./util/auth.js";

import { action as authAction } from "./pages/NewLogin.jsx";

import { action as logoutAction } from "./pages/Logout.js";

import Nutrition from "./health/Nutrition.jsx";

import HealthAwareness from "./health/HealthAwareness.jsx";

const router = createBrowserRouter([

{

path: "/",

element: <RootLayout />,

errorElement: <Error />,

id: "root",

loader: tokenLoader,

children: [

{ path: "", element: <Home /> },

{ path: "health-awareness", element: <HealthAwareness /> },

{ path: "ca", element: <Nutrition /> },

{ path: "contact-us", element: <ContactUs /> },

{ path: "logout", action: logoutAction },

{ path: "login", element: <NewLogin />, action: authAction },

]);

export default function App() {

return <RouterProvider router={router} />;

}

RootLayout.jsx

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

import NewNavbar from "../components/NewNavbar.jsx";

export default function RootLayout() {

return (

<main>

</main>

</>

);

}

Authentication handling is in NewLogin.jsx

import { json, redirect } from "react-router-dom";

import LoginForm from "../components/LoginForm";

export async function action({ request }) {

const data = await request.formData();

const authData = {

username: data.get("username"),

password: data.get("password"),

};

const response = await fetch("http://localhost:3000/auth/login", {

method: "POST",

headers: {

"Content-Type": "application/json",

body: JSON.stringify(authData),

});

if (response.status === 400) {

return response;

//throw json({ message: "invalid data" }, { status: 400 });

}

if (!response.ok) {

throw json(

{ message: "Could not authenticate this user." },

{ status: 400 }

);

}

const resData = await response.json();

const token = resData.token;

localStorage.setItem("token", token);

console.log(token);

return redirect("/");

}

auth.js

export function getAuthToken() {

const token = localStorage.getItem('token');

return token;

}

export function loader() {

return getAuthToken();

}

Logout.js

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

export function action() {

localStorage.removeItem('token');

return redirect('/');

}

NewNavbar.jsx

function logoutHandler() {

const proceed = window.confirm("Are you sure؟");

if (proceed) {

submit(null, { action: "/logout", method: "post" });

}

const token = useRouteLoaderData("root");

//inside the navbar

{!token && (

<li

className={`hidden md:block list-none text-[23px] p-6 hover:animate-pulse ${

isScrolled ? "text-emerald-800" : "text-slate-100"

}`}

<NavLink to="/login">login</NavLink>

</li>

)}

{token && (

<li

className={`hidden md:block list-none text-[23px] hover:animate-pulse p-6 ${

isScrolled ? "text-emerald-800" : "text-slate-100"

}`}

<button onClick={logoutHandler}>logout</button>

</Form>

</li>

)}

Останні новини

Поліція затримала мешканця Вознесенщини за вимагання 1000 доларів

14 Вересня 2024 в 14:06

Затримано підозрюваного у вчиненні умисного заподіяння тілесних ушкоджень патрульному поліцейському в Вознесенському районі

14 Серпня 2023 в 14:49

Підвищення цін на проїзд в приміському автотранспорті

20 Липня 2023 в 20:26

Читайте також

Як отримати від 100 грн за реєстрацію в ПУМБ

14 Серпня 2023 в 15:14

Як отримати від 100 грн за реєстрацію в Sense SuperApp (Альфа-Банк)

3 Липня 2023 в 13:22

Як економити на онлайн-покупках с кешбек-сервісом LetyShops

3 Липня 2023 в 13:04