umi6.x + react + antd的项目增加403（无权限页面拦截），404，错误处理页面

首先在src/pages下创建403，404，ErrorBoundary

403
import { Button, Result } from 'antd';
import { history } from '@umijs/max';

const UnAccessible = () => (
<Result
status="403"
title="403"
subTitle="抱歉，您无权限访问当前页面"
extra={<Button type="primary" onClick={()=>{
history.push('/')
}}>返回主页}
/>
);
export default UnAccessible;

404
import { Button, Result } from 'antd';
import { history } from '@umijs/max';

const NotFound = () => (
<Result
status="404"
title="404"
subTitle="抱歉，无法找到你需要的页面"
extra={<Button type="primary" onClick={()=>{
history.push('/')
}}>返回主页}
/>
);
export default NotFound;

ErrorBoundary（错误边界）
import { Result, Button, Tooltip, Typography } from 'antd';
import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-types
export default class ErrorBoundary extends React.Component {
state = { hasError: false, errorInfo: '' };
static getDerivedStateFromError(error) {
return { hasError: true, errorInfo: error.message };
}

componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
// eslint-disable-next-line no-console
console.log(error, errorInfo);
}

render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return (
<Result
status="500"
title={抱歉，服务发生错误！请刷新页面}
subTitle={
<Typography.Paragraph copyable={{
text:this.state.errorInfo
}}>错误信息</Typography.Paragraph>
}
extra={
<Button
type="primary"
onClick={() => {
window.location.reload();
}}
>
刷新页面

}
/>
);
}
return this.props.children;
}
}
在app.js配置
对于没有权限的页面，在浏览器输入地址，前端拦截，需要access.js方法拦截，src/access.js
4中routes.js中配置的access就是作为key（accessObj获取的key要和routes.js中配置的access一致）

/* eslint-disable array-callback-return */
import allData from '../config/routes';

//获取权限 key 根据 path 生成
function convertToAccessArray(data) {
let accessArray = [];
data.map(obj => {
if (obj.path && obj.path !== '/' && obj.path !== '/home') {
// 去掉路径中的斜杠，并且将首字母大写
const access = obj.path.replace(///g, '').charAt(0).toUpperCase() + obj.path.replace(///g, '').slice(1);
accessArray.push(access);
}
if (obj.routes) {
const childAccessArray = convertToAccessArray(obj.routes);
accessArray = accessArray.concat(childAccessArray);
}
});

return accessArray;
}

export default (initialState) => {

const {menuData} = initialState;
//后端返回的页面（路由）
const AccessList = convertToAccessArray(menuData?.routes??[]);
//全部页面
const AllList = convertToAccessArray(allData?.routes);
//结果对象 accessKey 对应配置的 routes 里面的 access
// {
// accessKey: true or false
// }
const accessObj = {};

//添加权限
AllList?.map(it=>{
accessObj[it] = AccessList.includes(it);
})

return accessObj;
};

//后端返回的页面（路由）格式类似：

复制代码

[
    {
        "name": "首页",
        "key": "2024042410100000000",
        "path": "/home",
        "icon": null,
        "routes": []
    },
    {
        "name": "IoT管理",
        "key": "2024042410200000000",
        "path": "/iot",
        "icon": null,
        "routes": [
            {
                "name": "设备管理",
                "key": "2024042410200200000",
                "path": "/iot/device",
                "icon": "icon-shebeiguanli",
                "routes": [
                    {
                        "name": "设备台账",
                        "key": "2024042410200201000",
                        "path": "/iot/device/account",
                        "icon": null,
                        "routes": []
                    }
                ]
            }
        ]
    }
]

如果要对没有权限的页面进行拦截，还需要在routes.js配置access

{
path: '/',
routes: [
{
path: '/',
redirect: '/home',
},
{
name: '首页',
path: '/home',
component: './Home',
},
{
name: 'IoT管理',
path: '/iot',
access: 'Iot',
routes: [
{
name: '设备清单',
path: '/iot/devicelist',
icon: 'icon-zhiduguifan',
component: './Iot/DeviceList',
access: 'Iotdevicelist',
}
],
},
{
path:'/*',
name: '404',
component: './404',
hideInMenu: true,
},
],
}