Я получил следующие данные из 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;
Как я могу экспортировать результат каждого условия и использовать его в других компонентах?
Вы можете создать собственный крючок, который называется 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);
//...
}