Antd Pro V5 первый опыт

React.js
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,
  };
};

сетевой запрос

Также должны быть крючки, официально предоставленныеuseRequestКрючки, подробности смотрите у официальных

Отключить интернационализацию

project/src/defaultSetting.ts

export default {
  menu: {
    locale: false,
  }
};

cut...

Категории