npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@alitajs/umi-plugin-authority

v0.5.0

Published

Umi plugin for authority management.

Downloads

16

Readme

@alitajs/umi-plugin-authority

@alitajs/umi-plugin-authority.

安装

Using npm:

$ npm install --save-dev @alitajs/umi-plugin-authority

or using yarn:

$ yarn add @alitajs/umi-plugin-authority --dev

启用方式

src/authority.ts 时启用。

介绍

我们约定了 src/authority.ts 为我们的权限定义文件,该文件需要默认导出一个方法,导出的方法会在项目初始化时被执行。该方法需要返回一个对象。如下所示:

// src/authority.ts
export default function(initialState) {
  const { currentUser } = initialState || {};

  // actions、policies应该由于 currentUser 推导得出
  return {
    actions: [
      { module: 'module1', action: 'action1' },
      { module: 'module1', action: 'action2' },
      { module: 'module1', action: 'action3' },
      { module: 'module2', action: 'action1' },
      { module: 'module2', action: 'action2' },
    ],
    policies: [
      {
        version: 1,
        statement: [
          {
            effect: 'allow',
            action: 'module1/*'
          }
        ]
      }
    ]
  };
}

其中 initialState 是通过初始化状态插件 @umijs/plugin-initial-state 提供的数据,你可以使用该数据来初始化你的用户权限。

API

useAuthority

API 请查看 Policy

我们提供了一个 Hooks 用于在组件中获取权限相关信息,如下所示:

import React from 'react';
import { useAuthority } from 'umi';

const PageA = props => {
  const { foo } = props;
  const { combinationVerify } = useAuthority();
 
  if (combinationVerify('module1/action1')) {
    // 存在 module1/action1 权限,则...
  }
 
  return <>TODO</>;
};
export default PageA;

Authority

可以在业务组件中使用插件提供的 React hook useAuthority 以及组件 对应用进行权限控制了。 组件 Authority 支持的属性如下:

| 参数 | 说明 | 类型 | 默认值 | | -------------- | ------------------------ | --------------------- | ------ | | access | 权限字符串 | string | -- | | accessible | 直接指定权限 | boolean | -- | | fallback | 无权限时的显示 | React.ReactNode | -- | | children | 需要控制权限的节点 | React.ReactNode | Function | -- |

注意: accessible 优先级最高

完整示例如下:

import React from 'react';
import { useAuthority, Authority } from 'umi';

const PageA = props => {
  const { foo } = props;
  const { combinationVerify } = useAuthority();
 
  if (combinationVerify('module1/action1')) {
    // 存在 module1/action1 权限,则...
  }
 
  return (
    <div>
      <Authority
        access="'module1/action1'"
        fallback={<div>Can not read foo content.</div>}
      >
        Foo content.
      </Authority>
      <Authority
        accessible={combinationVerify('module1/action1')}
        fallback={<div>Can not update foo.</div>}
      >
        Update foo.
      </Access>
      <Authority
        accessible={combinationVerify('module3/action1')}
        fallback={<div>Can not delete foo.</div>}
      >
        {(isMatch) => <span>权限校验结果: {isMatch}</span>}
      </Authority>
    </div>
  );
};