پیاده سازی کنترل دسترسی مبتنی بر نقش در React: یک فرو رفتن عمیق در useRoleManagement Hook

Summarize this content to 400 words in Persian Lang
مقدمهمدیریت نقش ها و مجوزهای کاربر یک جنبه حیاتی از امنیت و عملکرد برنامه وب است. این تضمین می کند که کاربران بر اساس نقش خود به بخش های مختلف برنامه دسترسی مناسب دارند. در این مقاله، من شما را با اجرای یک قلاب userRoleManagement سفارشی در React آشنا می‌کنم که رمز JWT را برای مدیریت مجوزهای کاربر رمزگشایی می‌کند.

راه اندازیقبل از ورود به پیاده سازی، بیایید ابزارها و کتابخانه های لازم را راه اندازی کنیم. شما نیاز خواهید داشت:

واکنش نشان دهید
jwt-decode برای رمزگشایی توکن های JWT
react-router-dom برای مدیریت مسیریابی و استخراج مسیر فعلی

npm install react-router-dom jwt-decode

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیاده سازیبیایید با تعریف رابط‌های مجوزها و بار JWT شروع کنیم.

import { JwtPayload, jwtDecode } from ‘jwt-decode’;
import { useLocation } from ‘react-router-dom’;

// Realm is for authentication mechanism like Keycloak

interface Realm extends JwtPayload {
realm_access: {
roles: string[];
};
}

// Interface representing the user’s permissions

interface Permissions {
add: boolean;
view: boolean;
edit: boolean;
confirm?: boolean;
include?: boolean;
deleteRow?: boolean;
}

// Interface representing the user’s permissions for various pages

interface UserPermissions {
partners?: Permissions;
projects?: Permissions;
// More pages can be added here as needed
}

type PermissionKeys = keyof UserPermissions;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در مرحله بعد، مجوزهای نقش های مختلف را تعریف می کنیم:

const permissions = {
manager: {
partners: {
add: false,
view: false,
edit: false,
deleteRow: true,
},
projects: {
add: false,
view: false,
edit: false,
deleteRow: false,
},
// Define more pages
},
analyst: {
// Define permissions for analyst role
},
director: {
// Define permissions for director role
},
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بررسی کنید که آیا نقش وجود دارد یا خیرما به یک تابع نیاز داریم تا بررسی کنیم آیا نقشی وجود دارد یا خیر و مجوزهای مرتبط را برگردانیم:

function ifRoleExists(roles: string[]) {
return roles
.map((role) => {
return permissions[role as keyof typeof permissions];
})
.filter(Boolean)[0];
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مجوزهای نقش را دریافت کنیداین تابع مجوزهای یک نقش و مسیر معین را بازیابی می کند:

function getPermissions(roleExists: UserPermissions, pathName: string) {
const withoutSlash = pathName.replace(‘/’, ”) as PermissionKeys;
return roleExists?.[withoutSlash] ?? pathName;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از RoleManagement Hookدر نهایت، ما قلاب useRoleManagement را پیاده سازی می کنیم:

export function useRoleManagement() {
const { pathname } = useLocation();

const token = localStorage.getItem(‘token’);

let decodedToken: Realm | null = null;

try {
if (token) {
decodedToken = jwtDecodeRealm>(token);
}
} catch (error) {
console.error(‘Invalid token:’, error);
}

const roles = decodedToken?.realm_access?.roles ?? [];

const roleExists = ifRoleExists(roles);

const rolePermissions = getPermissions(
roleExists,
pathname !== ‘/’ ? pathname : ‘/partners’,
);

if (!rolePermissions) {
return {};
}

const {
add,
view,
edit,
deleteRow,
confirm,
include,
} = rolePermissions as Permissions;

return {
add,
view,
edit,
deleteRow,
confirm,
include,
};
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال استفادهدر اینجا نحوه استفاده از قلاب useRoleManagement در کامپوننت React آورده شده است:

import React from ‘react’;
import { useRoleManagement } from ‘./useRoleManagement’;

const Dashboard = () => {
const { add, view, edit, deleteRow } = useRoleManagement();

return (
div>
{view && p>You can view this content./p>}
{add && button>Add Item/button>}
{edit && button>Edit Item/button>}
{deleteRow && button>Delete Item/button>}
/div>
);
};

export default Dashboard;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجهدر این مقاله، یک قلاب useRoleManagement سفارشی در React پیاده‌سازی کرده‌ایم تا مجوزهای کاربر را بر اساس نقش‌های آن‌ها مدیریت کنیم. این رویکرد تضمین می کند که برنامه شما ایمن باقی می ماند و کاربران بر اساس نقش های خود دسترسی مناسبی دارند. به راحتی می توانید مجوزها و نقش ها را مطابق با نیازهای برنامه خود سفارشی کنید.

امیدوارم این راهنما برای شما مفید بوده باشد. اگر سؤال یا پیشنهادی دارید، لطفاً در زیر نظر دهید!

npm install react-router-dom jwt-decode

import { JwtPayload, jwtDecode } from 'jwt-decode';
import { useLocation } from 'react-router-dom';

// Realm is for authentication mechanism like Keycloak

interface Realm extends JwtPayload {
  realm_access: {
    roles: string[];
  };
}

// Interface representing the user's permissions

interface Permissions {
  add: boolean;
  view: boolean;
  edit: boolean;
  confirm?: boolean;
  include?: boolean;
  deleteRow?: boolean; 
}

// Interface representing the user's permissions for various pages

interface UserPermissions {
  partners?: Permissions;
  projects?: Permissions;
 // More pages can be added here as needed
}

type PermissionKeys = keyof UserPermissions;

const permissions = {
  manager: {
    partners: {
      add: false,
      view: false,
      edit: false,
      deleteRow: true,
    },
    projects: {
      add: false,
      view: false,
      edit: false,
      deleteRow: false,
    },
    // Define more pages
  },
  analyst: {
    // Define permissions for analyst role
  },
  director: {
    // Define permissions for director role
  },
};

function ifRoleExists(roles: string[]) {
  return roles
    .map((role) => {
      return permissions[role as keyof typeof permissions];
    })
    .filter(Boolean)[0];
}

function getPermissions(roleExists: UserPermissions, pathName: string) {
  const withoutSlash = pathName.replace('/', '') as PermissionKeys;
  return roleExists?.[withoutSlash] ?? pathName;
}

export function useRoleManagement() {
  const { pathname } = useLocation();

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

  let decodedToken: Realm | null = null;

  try {
    if (token) {
      decodedToken = jwtDecodeRealm>(token);
    }
  } catch (error) {
    console.error('Invalid token:', error);
  }

  const roles = decodedToken?.realm_access?.roles ?? [];

  const roleExists = ifRoleExists(roles);

  const rolePermissions = getPermissions(
    roleExists,
    pathname !== '/' ? pathname : '/partners',
  );

  if (!rolePermissions) {
    return {};
  }

  const {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  } = rolePermissions as Permissions;

  return {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  };
}

import React from 'react';
import { useRoleManagement } from './useRoleManagement';

const Dashboard = () => {
  const { add, view, edit, deleteRow } = useRoleManagement();

  return (
    div>
      {view && p>You can view this content./p>}
      {add && button>Add Item/button>}
      {edit && button>Edit Item/button>}
      {deleteRow && button>Delete Item/button>}
    /div>
  );
};

export default Dashboard;