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...