在 Antd Pro 开箱即用的后台管理中，配置权限

需求描述

登录之后，对左侧菜单进行鉴权，不同登录的角色展示不同的菜单

实现方式

// src/app.js
// 添加以下代码，返回的对象 key 值可以自定义
export function getInitialState() {
  return {
    currentUser: "",
  };
}

adminRouteFilter: 等会在路由中配置 access 字段，类型是 Boolean

// src/access.js
export default function (initialState = {}) {
  const { currentUser } = initialState;
  return {
    // ...
    adminRouteFilter: currentUser == "admin", // 只有管理员可访问
    normalRouteFilter: (route) => hasRoutes.includes(route.name), // initialState 中包含了的路由才有权限访问
  };
}

配置 access 字段，它的值为 在 access.js 中返回的对象的 key

// routes.js
 {
    name: "统计总览",
    path: "/statistics/overview",
    component: "@/pages/statistics/overview/index",
    icon: "UnorderedListOutlined",
    access: 'adminRouteFilter'
},

一般情况下，肯定是登录之后才知道有哪些权限，所以在 登录后，手动设置 相关连接 setInitialState

import {useModel} from 'umi';

// 登录组件
export default () => {
    // 下面这句话 请查阅 https://v3.umijs.org/zh-CN/plugins/plugin-initial-state
    const { setInitialState } = useModel("@@initialState");

    // 登录方法
    login() {
        ajax().then(res => {
            // 假设 res.authority 是当前登录用户的所有权限
            setInitialState({currentUser: res.authority})
        })
    }
}