前端项目实战捌拾壹react-admin+material ui-踩坑-List的用法之usePermissions获取权限

简介: 前端项目实战捌拾壹react-admin+material ui-踩坑-List的用法之usePermissions获取权限
import * as React from "react";
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import { usePermissions } from 'react-admin';
const MyPage = () => {
    const { isLoading, permissions } = usePermissions();
    return isLoading
        ? (<div>Waiting for permissions...</div>)
        : (
            <Card>
                <CardContent>Lorem ipsum sic dolor amet...</CardContent>
                {permissions === 'admin' &&
                    <CardContent>Sensitive data</CardContent>
                }
            </Card>
        );
}
export default MyPage;
// in src/customRoutes.js
import * as React from "react";
import { Route } from 'react-router-dom';
import MyPage from './MyPage';
export default [
    <Route exact path="/baz" component={MyPage} />,
];
const { total, isLoading } = useListContext();
    const { permissions } = usePermissions();
    console.log(total,isLoading,permissions,"permissions is")

image.png

相关文章
|
20天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
2月前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
3月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
115 0
|
3月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
265 0
|
4月前
|
前端开发 Java 项目管理
List.of 问题之使用List.of方法为什么会引发前端解析失败的问题,如何解决
List.of 问题之使用List.of方法为什么会引发前端解析失败的问题,如何解决
|
4月前
|
前端开发 API
前端框架与库 - Material-UI组件库
【7月更文挑战第20天】Material-UI 是一个基于 React 的 UI 组件库,它遵循 Google 的 Material Design 设计规范,提供了丰富的预构建组件,极大地简化了前端开发过程。本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题,并附带代码示例,帮助你更好地掌握 Material-UI 的使用技巧。
153 0
|
4月前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
4月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
197 0
|
5月前
|
安全 Java
java线程之List集合并发安全问题及解决方案
java线程之List集合并发安全问题及解决方案
930 1
|
4月前
|
Java API Apache
怎么在在 Java 中对List进行分区
本文介绍了如何将列表拆分为给定大小的子列表。尽管标准Java集合API未直接支持此功能,但Guava和Apache Commons Collections提供了相关API。