umi -- 插件

umi插件

plugin-access

启用方式： 有src/access.ts时启用
des:约定了 src/access.ts 为我们的权限定义文件，该文件需要默认导出一个方法，导出的方法会在项目初始化时被执行。该方法需要返回一个对象，对象的每一个值就对应定义了一条权限。

// src/access.ts
export default function(initialState){
   
  // initialState是通过初始化状态插件@umijs/plugin-initial-state 提供的数据，你可以使用该数据来初始化你的用户权限
  const {
    userId, role } = initialState
  // 每个key对应一个布尔值，表示权限
  return {
   
    canReadFoo: true,
    canUpdateFoo: role === 'admin',
    canDeleteFoo: foo => {
   
      return foo.ownerId === userId;
    },
  }
}

• 路由权限配置
  配合 Layout 插件可以很简单的实现针对某些页面的权限控制。如下所示，只有拥有了 canReadPageA （在 src/access.ts 中定义）权限，用户才可以访问该页面。否则会默认渲染 Layout 插件内置的权限错误页面。

  // config/route.ts
  export const routes =  [
    {
       
      path: '/pageA',
      component: 'PageA',
      access: 'canReadPageA', // 权限定义返回值的某个 key
    }
  ]
  

• Hooks --> useAccess

import React from 'react';
import {
    useAccess } from 'umi';
const PageA = props => {
   
  const {
    foo } = props;
  const access = useAccess();
 
  if (access.canReadFoo) {
   
    // 如果可以读取 F