umi的权限管理

umi的权限管理

应用领域

通过应用数据组织和权限组件，该支架实现了基本权限管理
支架导出组件时，renderAuthorized函数的基本封装是权限（模拟数据），因此在支架使用时，不需要注意当前的权限
菜单和路由器许可

对于某些菜单的权限控制，只需转到路由器配置文件config.ts.
菜单项设置权限属性，该属性表示路由的访问权限。在路由生成文件中。
Authorized默认情况下，将包装页面组件进行判断处理

{
  path: '/form',
  icon: 'form',
  name: 'form',
  routes:[{
    path: '/form/basic-form',
    name: 'basicform',
    component: './Forms/BasicForm',
  }, {
    path: '/form/step-form',
    name: 'stepform',
    component: './Forms/StepForm',
    authority: ['guest'], // only guest can access
  }, {
    path: '/form/advanced-form',
    name: 'advancedform',
    component: './Forms/AdvancedForm',
    authority: ['admin'], // only admin can access
  }],
}

API: RenderAuthorized#
RenderAuthorized: (currentAuthority: string | () => string) => Authorized
权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。

Authorized# 最基础的权限控制。

import React from 'react';
import check, { IAuthorityType } from './CheckPermissions';

import AuthorizedRoute from './AuthorizedRoute';
import Secured from './Secured';

interface AuthorizedProps {
  authority: IAuthorityType;
  noMatch?: React.ReactNode;
}

type IAuthorizedType = React.FunctionComponent<AuthorizedProps> & {
  Secured: typeof Secured;
  check: typeof check;
  AuthorizedRoute: typeof AuthorizedRoute;
};

const Authorized: React.FunctionComponent<AuthorizedProps> = ({
  children,  //正常渲染的元素，权限判断通过时展示--reactNode
  authority, //准入权限/权限判断 
  //---string | array | Promise | (currentAuthority) =>  
  //boolean | Promise    
  noMatch = null, //权限异常渲染元素，权限判断不通过时展示--reactNode
}) => {
  const childrenRender: React.ReactNode = typeof children === 'undefined' ? null : children;
  const dom = check(authority, childrenRender, noMatch);
  return <>{dom}</>;
};

export default Authorized as IAuthorizedType;

Authorized.AuthorizedRoute#
authority 准入权限/权限判断
//string | array | Promise | (currentAuthority) => boolean | Promise
redirectPath 权限异常时重定向的页面路由 string

Authorized.Secured#
注解方式，@Authorized.Secured(authority, error)
authority 准入权限/权限判断
//string | array | Promise | (currentAuthority) => boolean | Promise

error 权限异常时渲染元素 reactNode

Authorized.check#
函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 Authorized.check(authority, target, Exception) 注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。

authority 准入权限/权限判断
//string | array | Promise | (currentAuthority) => boolean | Promise

target 权限判断通过时渲染的元素
exception 权限异常时渲染元素 reactNode

修改当前权限

脚手架中使用localStorage模拟权限角色，实际项目中可能需要从后台读取
脚手架中实现了一个简单的刷新权限的方法。在登陆/注销关键节点对当前权限进行了更新

如何控制页面访问权限（用户角色）

这里的获取方式有几种，像 pro 现在这样从 config 中传值，也可以通过 http 请求从服务端获取，甚至本地的 json 文件加载也可以。routerData 是一个 json 数组。获取之后只需返回类似格式的 json 即可。

router: {
  routes: [
    // dashboard
    {
      path: '/dashboard',
      authority: ['admin'],
      routes: [
        {
          path: '/dashboard/analysis',
          authority: ['admin', 'user'],  //配置准入权限,可以配置多个角色
        },
      ],
    },
  ];
}

注意 router 和 menuData 可以使用同一个数据，也可以使用不同的数据，注意他们的必要属性即可。