Antd Pro V5初体验

前言

一个开箱即用的中台前端/设计解决方案，V5的权限系统改变简直不要太爱了，我认为它能知足我司全部系统的权限功能设计
官方也说了Antd Pro V5以前权限一直是Pro的"弱项"

权限

project/src/access.ts

export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin'，
    // 这样写，我认为你能够写出花儿来。只要key返回false，系统会自动跳转 403
    canUserTab1: currentUser && localStorage.getItem('后端返回的权限id')
  };
}

// 对于运行时代码，应该都看得懂。 
import React from 'react';
import { useAccess, Access } from 'umi';

const PageA = (props) => {
  const { foo } = props;
  const access = useAccess(); // access 的成员: canAdmin
  if (access.canReadFoo) {
    // 若是能够读取 Foo，则...
  }
  return (
    <div>
      <Access accessible={access.canAdmin} fallback={<div>Can not read foo content.</div>}>
        Foo content.
      </Access>
      <Access accessible={access.canDeleteFoo(foo)} fallback={<div>Can not delete foo.</div>}>
        Delete foo.
      </Access>
    </div>
  );
};
复制代码

project/config/config.ts

export default defineConfig({
  routes: [
    {
      path: '/user',
      layout: false, // 是否显示layout
      routes: [
        {
          name: 'login',
          path: '/user/login',
          component: './user/login',
        },
      ],
    },
    {
      path: '/admin',
      name: 'admin',
      icon: 'crown',
      access: 'canAdmin', // 来自 src/access.ts 的 access函数
      component: './Admin',
      layout: { // 是否显示menu nav
        // hideMenu: true,
        // hideNav: true,
      },
      routes: [
        {
          path: '/admin/sub-page',
          name: 'sub-page',
          icon: 'smile',
          component: './Welcome'
        },
      ],
    }
  ]
});
复制代码

Layout

project/src/app.tsx

export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings };
}): BasicLayoutProps => {
  /**
    * 我认为搬砖须要关注这儿
    * 上面 access.ts 虽能控制路由是否能访问了，可是，若是换个权限从新登录左侧Menu依然会存在
    * 因此咱们须要在这里来控制 Menu 的显示状态，这里返回什么，左侧就会显示什么，就不会根据 config.ts 配置的路由来决定
    */
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    menuHeaderRender: () => <div>99999</div>,
    menuDataRender: (data) => {
      return [
        {
          path: '/welcome',
          name: '欢迎',
          // 须要注意这里icon不能使用字符串的形式
          icon: React.createElement(HomeOutlined),
        },
        {
          path: '/admin',
          name: '主页',
          icon: 'crown',
          children: [
            {
              path: '/admin/page1',
              name: '主页1',
              exact: true
            },
            {
              path: '/admin/page2',
              name: '主页2',
              exact: true
            }
          ]
        }
      ]
    },
    ...initialState?.settings,
  };
};
复制代码

网络请求

也必须是hooks，官方提供了 useRequest Hooks，具体看官方哦

关闭国际化

project/src/defaultSetting.ts

export default {
  menu: {
    locale: false,
  }
};
复制代码

cut...