Ant Design Pro 使用小结

前言

最近在使用Ant Design Pro来搭建一个后台管理系统，对在开发中遇到的问题进行了如下总结。

一、Eslint规范

引入jsx文件时省略 .jsx 后缀

// .eslintrc.js
 rules: {
   
  //  'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
    'react/jsx-filename-extension': [1, {
    extensions: ['.js', '.jsx'] }],
    ...
 }

支持路径别名

yarn add eslint-import-resolver-webpack eslint-import-resolver-alias

// .eslintrc.js
settings: {
   
   'import/resolver': {
   
     alias: {
   
       map: [['@', path.resolve('src')]],
     },
   },
 },

// config/config.js
import path from 'path';

export default {
   
...
 alias: {
   
    '@': path.resolve('../src'),
  },
};

在代码文件中以注释定义eslint

• 临时在一段代码中取消eslint检查

  /* eslint-disable */
  
  // Disables all rules between comments 
  alert('123');
  
  /* eslint-enable */
  

• 临时在一段代码中取消个别规则的检查 (如no-alert, no-console)

  /* eslint-disable no-alert, no-console */
  
  // Disables no-alert and no-console warnings between comments 
  alert(‘123’); 
  console.log(‘123’);
  
  /* eslint-enable no-alert, no-console */
  

• 在整个文件中取消eslint检查

  /* eslint-disable */
  
  // Disables all rules for the rest of the file 
  alert('123');
  

• 在整个文件中禁用某一项eslint规则的检查

  /* eslint-disable no-alert */
  
  // Disables no-alert for the rest of the file 
  alert('123');
  

• 针对某一行禁用eslint检查

  alert('foo'); // eslint-disable-line
  
  // eslint-disable-next-line 
  alert('123');
  

• 针对某一行的某一具体规则禁用eslint检查

  alert('123'); // eslint-disable-line no-alert
  
  // eslint-disable-next-line no-alert 
  alert('123');
  

二、layout模板去掉页脚antd链接

// src/layouts/BasicLayout.jsx
const defaultFooterDom = <DefaultFooter copyright="xx系统出品" links="" />;
...
return (
   <>
     {
   defaultFooterDom}
      <div style={
   {
    padding: '0px 24px 24px', textAlign: 'center' }} />
   </>
 );

三、在请求头中添加acess_token

通常在项目开发中需要判断用户是否已成功登录并拥有访问权限，这时我们不会只依赖于后端的session。因为每个用户登录后，如果都需要服务器存储该用户的登录状态，这样也会影响服务端性能，所以我们通常选择在客户端（浏览器）存储token，在发送请求时，在请求头中添加token，后端就能依据token判断用户权限

因为antd pro已为开发者封装了src/utils/request.js文件，我们只需要使用里面的request方法，但是如果每次请求都要手动添加access_token，也太麻烦了，所以我们可以利用request.interceptors.request.use(url, options)方法统一处理

import {
    extend } from 'umi-request';
import {
    getToken } from './authority';

/**
 * 配置request请求时的默认参数
 */
const request = extend({
   
  // 默认错误处理
  errorHandler,
  credentials: 'include', // 默认请求是否带上cookie
});

/**
 * 配置request拦截器, 改变url 或 options.
 */
request.interceptors.request.use(async (url, options) => {
   
  const token = getToken();  // 获取存储在浏览器的token
  const defaultHeaders = {
   
    Accept: 'application/json',
  };
  if (token && token.access_token) {
   
   // 根据前后端约定的api在请求头里添加token
    defaultHeaders.Authorization = `Bearer ${
     token.access_token}`; 
  }
  const newOptions = {
    ...options, headers: defaultHeaders };
  if (
    newOptions.method === 'POST' ||
    newOptions.method === 'PUT' ||
    newOptions.method === 'DELETE'
  ) {
   
    if (!(newOptions.body instanceof FormData)) {
   
      newOptions.headers = {
   
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
      };
      newOptions.body = JSON.stringify(newOptions.body);
    } else {
   
      // newOptions.body is FormData
      newOptions.headers = {
   
        ...newOptions.headers,
      };
    }
  }
  return {
   
    url,
    options: {
    ...newOptions },
  };
});

export default request;

四、用户角色

有时我们需要设置不同用户角色，用来判断该用户所拥有的权限能操作或访问哪些功能和页面，antd pro已经为我们预设了这一功能，我们只需要在此基础上进一步完善

• 首先我们需要知道，antd pro在渲染页面时，是利用src/utils/authority.js里的getAuthority方法来获取当前用户的角色，以此来判断该用户的权限，所以我们应该在该方法里返回真正的用户角色

// src/utils/authority.js
// 这里只给出大致的实现思路
export function getAuthorityByToken() {
   
  const str = localStorage.getItem('api-token');  // 用token判断用户是否登录
  if (!str) {
   
    return ['guest'];
  }
  const expires = localStorage.getItem('api-token-expires');
  if (moment(expires).isBefore(moment(new Date()))) {
     // 判断是否登录超时
    setUser({
   });
    return ['guest'];
  }
  const user = getUser();  // getUser方法将返回当前用户信息，需要自己完善
  if (!user || !user.roles) {
   
    return ['guest'];
  }
  return user.roles;
}

export function getAuthority() {
   
  return getAuthorityByToken(