React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов или компонентов пользовательского интерфейса. Он позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».

Однако, когда дело доходит до таких понятий, как маршрутизация, особенно расширенные сервисы, такие как маршрутизация на основе ролей, это может сбивать с толку начинающих программистов. Сегодня мы поможем вам избавиться от страха и осуществить мечту.

Чтобы выполнить маршрутизацию на основе ролей, нам придется хранить пользовательские данные в локальном хранилище браузера или в виде файла cookie, как только мы вызовем нашу конечную точку входа и получим токен пользователя. В этом примере мы будем использовать локальное хранилище. Добавьте следующую строку в блок успешного входа в API-вызов REST компонента входа.

localStorage.setItem("token", res.data.token);

Как только токен будет сохранен в локальном хранилище, мы можем получить доступ к этому токену в файле App.js, чтобы определить роль пользователя и отобразить компоненты на основе указанной роли.

Есть два условия, чтобы убедиться, что мы можем обрабатывать маршрутизацию на основе ролей из реакции:

1. В пользовательской модели должен быть атрибут с именем «роль», чтобы определить тип пользователя.

2. Этот атрибут следует передать полезной нагрузке токена, чтобы убедиться, что мы можем получить к нему доступ из внешнего интерфейса.

Теперь давайте посмотрим, как мы должны реализовать наш app.js.

import React, { useState } from "react";
import jwt from "jwt-decode";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
import Login from "./components/Login";
import Student from "./routes/Student";
import Staff from "./routes/Staff";
import Admin from "./routes/Admin";
function App() {
 const token = localStorage.getItem("token");
 let role = "";
 let userObj = "";
 if (token) {
  const payload = jwt(token);
  role = payload.role;
  userObj = payload;
 }
 const [userType, setUserType] = useState(role);
 return (
  <Router>
   <div className="App">
    {userType === "" ? <Login /> : ""}
    {userType === "student" ? <Student/> : ""}
    {userType === "staff" ? <Staff/> : ""}
    {userType === "admin" ? <Admin/> : ""}
   </div>
  </Router>
 );
}
export default App;

Здесь мы сначала получаем тип пользователя, обращаясь к полезной нагрузке токена jwt, который хранится в локальном хранилище браузера. Затем мы импортировали еще 3 маршрута для навигации в зависимости от роли пользователя. Внутри элемента Router в файле app.js различные компоненты отображаются в зависимости от типа пользователя, вошедшего в систему.

Компонент входа будет отображаться, если какой-либо тип пользователя не указан. (Пользователь не авторизовался правильно)

Заключение

Эта статья представляет собой краткое руководство, которое поможет вам создать маршрутизацию на основе ролей с помощью React 😊. Сегодня мы узнали,

  • Что такое Реакт js
  • Как использовать локальное хранилище для хранения/получения предметов
  • Как перейти к разным маршрутам в зависимости от роли пользователя в React

Надеюсь, эта статья вам очень помогла. Спасибо, что дочитали до конца! ❤️