React Role：轻量级角色访问管理解决方案

React Role：轻量级角色访问管理解决方案

react-role Lightweight role based access management solution for React applications 项目地址: https://gitcode.com/gh_mirrors/re/react-role

1. 项目介绍

React Role 是一个为 React 应用程序设计的轻量级角色访问管理（RBAC）解决方案。它提供了组件、钩子和辅助方法，用于在整个 React 应用程序中控制访问检查和用户权限。

2. 项目快速启动

首先，你需要通过 npm 或 yarn 安装 @permify/react-role：

npm install @permify/react-role
# 或者
yarn add @permify/react-role

然后，在你的 React 应用程序中，使用 PermifyProvider 组件包裹需要执行访问检查的部分：

import React from 'react';
import { PermifyProvider } from '@permify/react-role';

const App = () => {
  return (
    <PermifyProvider>
      {/* 应用程序层级，路由，主题提供者等 */}
    </PermifyProvider>
  );
};

export default App;

接下来，使用 setUser 方法设置登录用户信息，建议在登录函数的 promise 中调用此方法：

import { usePermify } from '@permify/react-role';

const login = async (email, password) => {
  const response = await login(email, password);
  const { setUser } = usePermify();
  setUser({
    id: "2",
    roles: ["admin", "manager"],
    permissions: ["post-create", "user-delete", "content-show"]
  });
  // 继续身份验证流程
};

3. 应用案例和最佳实践

以下是如何使用 HasAccess 组件来保护需要授权才能访问的组件或 UI 层次结构：

import React from 'react';
import { HasAccess } from '@permify/react-role';

const AnyComponent = () => {
  return (
    <>
      <HasAccess
        roles={["admin", "manager"]}
        permissions="user-delete"
        renderAuthFailed={<p>您无权访问！</p>}
        isLoading={<Spinner />}
      >
        <button type="button">删除</button>
      </HasAccess>
    </>
  );
};

export default AnyComponent;

在条件逻辑结构中，你可以使用 isAuthorized 辅助函数来检查用户是否授权执行某个操作：

import React, { useState, useEffect } from 'react';
import { usePermify } from '@permify/react-role';

const AnyComponent = () => {
  const { isAuthorized, isLoading } = usePermify();

  useEffect(() => {
    const fetchData = async () => {
      if (await isAuthorized(["admin", "manager"], "user-delete")) {
        // 从服务器请求受保护的信息
      }
    };
    fetchData();
  }, []);

  return (
    <>
      {isLoading && <span>加载中...</span>}
      {dataFetched && /* 渲染受保护组件，UI 层次结构等 */}
    </>
  );
};

export default AnyComponent;

4. 典型生态项目

目前，React Role 项目没有列出具体的生态项目。但是，它的设计使得它易于与其他 React 相关库和框架集成，为开发者提供了灵活性和扩展性。开发者可以根据自己的需求，将 React Role 集成到各种 React 应用程序中，以实现细粒度的访问控制。

react-role Lightweight role based access management solution for React applications 项目地址: https://gitcode.com/gh_mirrors/re/react-role