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
Надеюсь, эта статья вам очень помогла. Спасибо, что дочитали до конца! ❤️