不同角色路由权限配置（六）

云风网
云风笔记
云风知识库

一、启用方式

配置开启config/config.ts。同时需要 src/access.ts 提供权限配置

export default {
  access: {},
  // access 插件依赖 initial State 所以需要同时开启
  initialState: {},
};

这里以扩展的路由配置为例，配置只有admin权限才能查看的页面

1、在src/access.ts文件定义权限

export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
  const { currentUser } = initialState ?? {};
  return {
    canAdmin: currentUser && currentUser.username === 'admin',
  };
}

这里判断登录名是否是admin

2、config/routes.ts添加路由配置access: ‘canAdmin’

{
    path: '/func',
    name: 'func',
    icon: 'crown',
    access: 'canAdmin',
    routes: [
      {
        path: '/func',
        redirect: '/func/funcManage',
      },
      {
        path: '/func/funcManage',
        name: 'funcManage',
        component: './funcManage',
      },
    ],
  }

这样功能管理模块就只能admin账号才能看到

3、react hook useAccess获取权限相关信息

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

const PageA = (props) => {
  const { foo } = props;
  const access = useAccess();

  if (access.canReadFoo) {
    // 如果可以读取 Foo，则...
  }

  return <>TODO</>;
};

export default PageA;

配合 Access 组件可以很简单的实现页面内的元素的权限控制。

4、Access组件

accessible

Type: boolean
是否有权限，通常通过 useAccess 获取后传入进来。

fallback

Type: React.ReactNode
无权限时的显示，默认无权限不显示任何内容。

children

Type: React.ReactNode
有权限时的显示。

import React from 'react';
import { useAccess, Access } from 'umi';

const PageA = (props) => {
  const { foo } = props;
  const access = useAccess(); // access 的成员: canReadFoo, canUpdateFoo, canDeleteFoo

  if (access.canReadFoo) {
    // 如果可以读取 Foo，则...
  }

  return (
    <div>
      <Access
        accessible={access.canReadFoo}
        fallback={<div>Can not read foo content.</div>}
      >
        Foo content.
      </Access>
      <Access
        accessible={access.canUpdateFoo}
        fallback={<div>Can not update foo.</div>}
      >
        Update foo.
      </Access>
      <Access
        accessible={access.canDeleteFoo(foo)}
        fallback={<div>Can not delete foo.</div>}
      >
        Delete foo.
      </Access>
    </div>
  );
};