具有资源的 React-Admin 权限

如何解决具有资源的 React-Admin 权限

您好，感谢阅读。

我对 react admin 的资源权限有问题。 我想隐藏一些具有特定用户角色的资源，使用通过登录获得的 JWT 中的一系列角色。

这是用于身份验证的 authProvider

import decodeJwt from 'jwt-decode';

export default {

    login: ({ username,password }) => {

        const request = new Request('http://myresource.org',{
            method: 'POST',body: JSON.stringify({ username,password }),headers: new Headers({ 'Content-Type': 'application/json' }),});
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({ token }) => {
                const decodedToken = decodeJwt(token);
                localStorage.setItem('token',token);
                localStorage.setItem('permissions',JSON.stringify(decodedToken.roles));
             });
    },logout: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('permissions');
        return Promise.resolve();
    },checkError: error => {

    },checkAuth: () => {
        return localStorage.getItem('token') ? Promise.resolve() : Promise.reject();
    },getPermissions: () => {
        const roles = localStorage.getItem('permissions');
        console.log(roles);    //This print correctly the array
        return roles ? Promise.resolve(JSON.parse(roles)) : Promise.reject();
    }
};

这是主应用

import * as React from "react";
import { Admin,Resource,resolveBrowserLocale } from 'react-admin';

import Dashboard from './Dashboard';

/*** Import Lingue ***/ 
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from 'ra-language-english';
import italianMessages from 'ra-language-italian';
import * as resources_IT from './translations/Resources_IT';

/*** Import Grafici ***/ 
import UserIcon from '@material-ui/icons/Group';
import HotelIcon from '@material-ui/icons/Hotel';
import BookingIcon from '@material-ui/icons/MenuBook';
import DeviceIcon from '@material-ui/icons/DeviceHub';
import CustomerIcon from '@material-ui/icons/EmojiPeople';
import DeviceAccountIcon from '@material-ui/icons/AccountBox';

/*** Import Providers ***/ 
import dataProvider from './providers/DataProvider';
import authProvider from './providers/AuthProvider';

/*** Import Resources ***/ 
import { HotelList,HotelEdit,HotelCreate } from './resources/Hotel';
import { DeviceList,DeviceEdit,DeviceCreate } from './resources/Device';
import { UserList,UserEdit,UserCreate,UserShow } from './resources/User';
import { BookingList,BookingEdit,BookingCreate } from './resources/Booking';
import { CustomerList,CustomerEdit,CustomerCreate } from './resources/Customer';
import { DeviceAccountList,DeviceAccountEdit,DeviceAccountCreate } from './resources/DeviceAccount';



/* Configurazione della lingua del Browser */
const messages = {
    it: { ...italianMessages,...resources_IT },en: englishMessages,};

const i18nProvider = polyglotI18nProvider(
    locale => messages[locale] ? messages[locale] : messages.en,resolveBrowserLocale()
);


const App = () => (

    <Admin dashboard={Dashboard} dataProvider={dataProvider} i18nProvider={i18nProvider} authProvider={authProvider}>

        {permissions => [
        permissions.indexOf('SYSADM') >= 0 ? (<Resource name="hotels" list={HotelList} edit={HotelEdit} create={HotelCreate} icon={HotelIcon} />) : null,]}

        <Resource name="roles" />
        <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} icon={UserIcon} />
        <Resource name="devices" list={DeviceList} edit={DeviceEdit} create={DeviceCreate} icon={DeviceIcon} />
        <Resource name="bookings" list={BookingList} edit={BookingEdit} create={BookingCreate} icon={BookingIcon} />
        <Resource name="customers" list={CustomerList} edit={CustomerEdit} create={CustomerCreate} icon={CustomerIcon} />
        <Resource name="deviceaccounts" list={DeviceAccountList} edit={DeviceAccountEdit} create={DeviceAccountCreate} icon={DeviceAccountIcon} />

    </Admin>
);

export default App;

最后，这是 JWT：

{
  "aud": "backoffice-fe","sub": "[e-mail]","idHotels": [
    "21816730-a4ef-4fea-8fb9-adc019d80485"
  ],"roles": [
    "SYSADM"
  ],"iss": "backoffice-api"
}

似乎没有正确获取 app.js 中的 permissions。 有人知道怎么解决吗？

谢谢

解决方法

文档示例：

https://marmelab.com/react-admin/Authorization.html

对我有用。只需确保：

  const { loading,permissions } = usePermissions();

然后

 return loading
    ? (<div>Waiting for permissions...</div>)
    : (
      <>
        (your admin...)

最后就像在文档中一样：

{permissions => [
    // Restrict access to the edit and remove views to admin only
    <Resource
        name="customers"
        list={VisitorList}
        edit={permissions === 'admin' ? VisitorEdit : null}
        icon={VisitorIcon}
    />,// Only include the categories resource for admin users
    permissions === 'admin'
        ? <Resource name="categories" list={CategoryList} edit={CategoryEdit} icon={CategoryIcon} />
        : null,]}

ps：要做到这一点，你必须使用一个函数作为唯一的孩子。