Авторизация в react js с кастомным хуком.

Сегодня я воспользуюсь пользовательским хуком и создам авторизацию для администратора и других ролей менеджера.

Давайте начнем с создания пользовательского хука как useUserRole.js

import {useEffect} from 'react';
import { toast } from 'react-toastify';

import {useAuth} from './useAuth';

export const useUserRole = (allowedRoles) => {

 const {session} = useAuth();

 if (!allowedRoles.includes(session?.user?.role)) {
 localStorage.removeItem('session')
 window.location.reload()
 toast.error(`Unauthorized`)
 };

 return true
}

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

import {useContext} from 'react';

import { AuthContext } from '../context/AuthProvider';

//simply returning the context value for reusing auth hook
export const useAuth = () => {
  return useContext(AuthContext)
};

В компоненте AuthContext мы использовали сведения о сеансе или пользователе для хранения в локальном хранилище.

import {createContext, useState} from 'react';

import { getSession, setSessionInLocalStorage } from '../_helpers/crud/Auth';

//extracting session or userdetails value from localstorage
export const AuthContext = createContext(getSession() || '');

const AuthProvider = (props) => {

  const auth = getSession();

  const [session, setSession] = useState(auth || '');

  const setAuth = (token) => {
    setSession(token)
    setSessionInLocalStorage(token)
  };

  const value = {
    session,
    setAuth,
  };

  return(
 <AuthContext.Provider value={value}>{props.children}</AuthContext.Provider>
 )
}

export default AuthProvider

Здесь мы создали кастомный хук, который принимает allowRoles, и мы проверяем разрешенные роли с ролью в нашем сеансе во время входа в систему.

здесь условие: если allowRoles равно роли в сеансе, то им разрешено просматривать предоставленный маршрут, иначе они будут перенаправлены на страницу входа.

Теперь мы можем указать роли.

//predefined-static roles
export const ROLE = {
 Admin: 'Admin',
 Manager: 'Manager',
 User: 'User'
};

Теперь в любом компоненте, таком как Blog.js

import React, { useState } from 'react';

import { useUserRole } from '../../../hooks/useUserRole';
//accessing role pre-defined
import { ROLE } from '../../../_helpers/Role'

const Blog = () => {
//checking the role
 useUserRole([ROLE.Admin]);
return ( 
 <>Blog page can be accessed only by admin</>
 )
};

export default Blog

#Conclusion

Следовательно, авторизация выполнена успешно, и, следовательно, мы можем повторно использовать хук для защищенных маршрутов.