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

一、启用方式

配置开启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, canDeleteFooif (access.canReadFoo) {// 如果可以读取 Foo，则...}return (<div><Accessaccessible={access.canReadFoo}fallback={<div>Can not read foo content.</div>}>Foo content.</Access><Accessaccessible={access.canUpdateFoo}fallback={<div>Can not update foo.</div>}>Update foo.</Access><Accessaccessible={access.canDeleteFoo(foo)}fallback={<div>Can not delete foo.</div>}>Delete foo.</Access></div>);
};