前端项目实战捌拾壹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

相关文章
|
19天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
1月前
|
前端开发 JavaScript UED
使用React Hooks优化前端应用性能
本文将深入探讨如何使用React Hooks来优化前端应用的性能,重点介绍Hooks在状态管理、副作用处理和组件逻辑复用方面的应用。通过本文的指导,读者将了解到如何利用React Hooks提升前端应用的响应速度和用户体验。
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
3月前
|
前端开发 开发者
探索前端框架的新趋势:React Hooks的应用与实践
本文将深入探讨前端开发中的新趋势,重点介绍React Hooks的应用与实践。通过学习和使用React Hooks,开发者可以更高效地构建可维护、可扩展的前端应用程序。本文将详细介绍React Hooks的原理、优势以及如何在实际项目中运用Hooks来提高开发效率并改善代码结构。无论你是刚入门前端开发还是经验丰富的工程师,本文都将对你有所启发。
|
3月前
|
前端开发 JavaScript C++
探索前端框架选择:React vs Vue
在现代Web开发中,前端框架扮演着关键的角色。本文将探讨两个最受欢迎的前端框架之间的比较:React和Vue。我们将分析它们的特点、优缺点以及适用场景,帮助开发者做出明智的选择。
|
3月前
|
前端开发 JavaScript 算法
深入理解前端框架:解析 React 的虚拟 DOM
虚拟 DOM 是 React 前端框架的核心概念之一。本文将深入探讨虚拟 DOM 的原理和应用,帮助读者更好地理解 React 框架的工作机制,并学习如何高效地使用虚拟 DOM 进行前端开发。
35 1
|
1月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
27 0
|
1月前
|
开发框架 前端开发 JavaScript
深入探究React:前端开发的利器
深入探究React:前端开发的利器
22 1
|
1月前
|
XML 前端开发 JavaScript
【前端】深入了解React JSX语法及实例应用
【前端】深入了解React JSX语法及实例应用
16 0
|
1月前
|
前端开发
利用React Hooks优化前端状态管理
本文将深入介绍如何利用React Hooks优化前端状态管理,包括Hooks的概念、使用方法以及与传统状态管理方式的对比分析,帮助前端开发人员更好地理解和应用这一现代化的状态管理方案。