Как получить разрешения от другого файла js в ответ

Я получил следующие данные из server и сохранил их в Redux

[
    {
        "resourceId": 1,
        "resourceAction": "UserInsert",
        "resourceController": "Home",
        "resourceTitle": "ثبت کاربر"
    },
    {
        "resourceId": 4,
        "resourceAction": "ChangePassword",
        "resourceController": "Home",
        "resourceTitle": "تغییر کلمه عبور"
    },
    {
        "resourceId": 5,
        "resourceAction": "UserEdit",
        "resourceController": "Home",
        "resourceTitle": "ویرایش کاربر"
    },
    {
        "resourceId": 6,
        "resourceAction": "UserDelete",
        "resourceController": "Home",
        "resourceTitle": "حذف کاربر"
    },
    {
        "resourceId": 18,
        "resourceAction": "*",
        "resourceController": "*",
        "resourceTitle": "همه"
    }
]

Я хочу записать все условия в отдельный файл js и использовать результат каждого условия в компонентах.

мой файл persmission.js

//REDUX IMPORT
import { useDispatch, useSelector } from "react-redux";

//redux data
const permissions = useSelector((state) => state.permissions.data);

export const canAll = permissions.resourceController == '*';
export const canInsertUser = (permissions.resourceAction == 'UserInsert' && permissions.resourceController == 'Home') || canAll;

Как я могу экспортировать результат каждого условия и использовать его в других компонентах?

[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
Сегодня я сделал страницу обзора с помощью react. Я использовал некоторые иконки из reacting icons и использовал генератор случайных чисел для...
Как настроить среду разработки React.
Как настроить среду разработки React.
весь процесс настройки среды разработки react.
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
React - это библиотека JavaScript для создания пользовательских интерфейсов.
Как использовать get bounds с react-leaflet и данными JSON
Как использовать get bounds с react-leaflet и данными JSON
Я считаю, что получить границы из библиотеки leaflet Js очень просто, но использование этой функции может быть немного сложным. Поэтому позвольте мне...
0
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать собственный крючок, который называется usePermission. Этот хук получит разрешение как enum и в результате вернет значение bool. Также есть проблема в этой строке кода, которую я обновил:

const permissions = useSelector((state) => state.permissions.data); //=> permssions is array and you can not use it like this : permissions.resourceController

Вот пример реализации нужной вам функциональности:

import { useDispatch, useSelector } from "react-redux";

export const permissionEnum = Object.freeze({
        canAll: 'canAll',
        canInsertUser: 'canInsertUser',
        //... => other permissions
});

export const usePermission = () =>
{
   const permissionArray = [];
   const permissions = useSelector((state) => state.permissions.data);
   if(permissions.some((permission) => permission.resourceController == '*'))
     permissionArray.push(permissionEnum.canAll);
   if(permissions.some((permission) => (permissions.resourceAction == 'UserInsert' && permissions.resourceController == 'Home'))
     permissionArray.push(permissionEnum.canInsertUser);
   //... => other conditions
  
  return permissionArray;
}

export const hasPermission = (permissionValue) =>
{ 
  const permissions = usePermission();
  return permissions.some((permission)=> permission == permissionValue);
}

Таким образом, вы можете использовать его в образце компонента следующим образом:

import { usePermission, hasPermission, permissionEnum } from './permission.js';

const SampleComponent = (props) =>
{
   // if you just need all permissions in an array :
   const permissions = usePermission();
   // if you need check a specific permission : 
   const canAll = hasPermission(permissionEnum.canAll);
   //...
}

Другие вопросы по теме