umi初始化+配置-2

109 阅读1分钟

1.拦截器:针对后端返回红色status

export const request: RequestConfig = {
  timeout: 2000,
  // status成功或失败后的message提示,以及失败后的跳转路由
  errorConfig: {
    // 失败后的跳转页面
    // errorPage: '/login',
    adaptor: (resData) => {
      return {
        ...resData,
        // message.success
        success: resData?.message,
        // message.error:例如access过期
        errorMessage: resData?.detail,
        // 设定错误时的动作: error display type: 0 silent; 1 message.warn; 2 message.error; 4 notification; 9 page
        showType: 2
      };
    },
  },
  requestInterceptors: [
    (url, options) => {
      const anguanAccess = localStorage.getItem('anguanAccess');
      // 非登录页面没有access
      if (url !== '/ding/api/user/login' && !anguanAccess) {
        message.error('用户登录token不存在');
        history.push("/login");
      }
      return {
        url,
        options: {
          ...options,
          headers: {
            ...options.headers,
            Authorization: 'Bearer ' + anguanAccess,
          }
        }
      };
    },
  ],
  responseInterceptors: [
    async (response) => {
      const result = await response.clone().json();
      if (response.status === 401 || request?.code === 401) {
        history.push('/login');
      }
      return response;
    },
  ],
};

2.layout配置

layout: {
  name: 'XX平台',
  layout: 'side',
  logo: '/images/logo.png',
  navTheme: 'dark',
  primaryColor: '#1890ff',
  // 流式/定宽
  contentWidth: 'Fluid',
  fixedHeader: true,
  fixSiderbar: true,
  // 色弱模式
  pwa: false,
  headerHeight: 48,
  // 分割一级菜单到表头
  splitMenus: false,
},

3.表单校验

rules={[
  ({ getFieldValue }) => ({
    validator() {
      const ruleList = getFieldValue(['ruleList', index]);
      if (
        ruleList?.resourceNameFilter ||
        (ruleList?.resourceGroupIdFilter &&
          ruleList?.resourceGroupIdFilter?.length > 0) ||
        (ruleList?.resourceTagFilterArr &&
          ruleList?.resourceTagFilterArr.some(
            (item: any) => item?.resourceTagKey,
          ))
      ) {
        return Promise.resolve();
      }
      return Promise.reject(
        new Error('3条筛选规则中,请至少填写一项'),
      );
    },
  }),
]}