學習 Antd Pro 前后端分離

1.前言

最近學習reactjs ，前些年用RN開發過移動端，入門還算輕松。現在打算使用 Antd Pro 實現前后端分離。要使用Antd Pro這個腳手架，必須熟悉 umi、dva、redux-saga 等相關知識。

基礎知識及目錄結構可以先看官方文檔 ： https://pro.ant.design/docs/getting-started-cn

官方介紹：

Ant Design Pro 是一個企業級中后台前端/設計解決方案，我們秉承 [Ant Design](http://ant.design/) 的設計價值觀，致力於在設計規范和基礎組件的基礎上，繼續向上構建，提煉出典型模板/業務組件/配套設計資源，進一步提升企業級中后台產品設計研發過程中的『用戶』和『設計者』的體驗。

 

2. 網絡請求庫添加鈎子

鈎子的目的主要是對請求頭設置（如：添加 token，api服務端通過token鑒權，當然您的token格式也可以是jwt，我這里是自己加密后的字符串）和對請求返回的數據實現攔截過濾特殊處理。

 

antd pro 使用的是 umi-request.js 這個庫，其實也是基於 fetch 封裝 。 一開始用axios替換了request.js里面。后來發現umi-request 也很容添加鈎子，這里在umi-request上添加。

 

添加攔截鈎子：

 

• 提交請求格式（根據你的api服務選擇）：

  payload（json格式提交） ： 'Content-Type': 'application/json',  

  formData （表單格式提交） ： 'Content-Type': 'application/x-www-form-urlencoded'

• token：

  系統用戶登錄后存儲在 localStorage -> zone-token

• 返回攔截 ：（request.interceptors.response）：

  我的api返回格式是：{code：int，msg：string，data：object}

  通過返回的code值 提示 token 過期 、token校驗失敗，做相應處理（跳出登錄等等處理）

  或其他特殊碼（code）提示及處理 

src\utils\request.js 調整后代碼

/**
 * request 網絡請求工具
 */
import { extend } from 'umi-request';
import { notification } from 'antd';
import router from 'umi/router';

const codeMessage = {
  200: '服務器成功返回請求的數據。',
  201: '新建或修改數據成功。',
  202: '一個請求已經進入后台排隊（異步任務）。',
  204: '刪除數據成功。',
  400: '發出的請求有錯誤，服務器沒有進行新建或修改數據的操作。',
  401: '用戶沒有權限（令牌、用戶名、密碼錯誤）。',
  403: '用戶得到授權，但是訪問是被禁止的。',
  404: '發出的請求針對的是不存在的記錄，服務器沒有進行操作。',
  406: '請求的格式不可得。',
  410: '請求的資源被永久刪除，且不會再得到的。',
  422: '當創建一個對象時，發生一個驗證錯誤。',
  500: '服務器發生錯誤，請檢查服務器。',
  502: '網關錯誤。',
  503: '服務不可用，服務器暫時過載或維護。',
  504: '網關超時。',
};

/**
 * 異常處理程序
 */
const errorHandler = error => {
  const { response = {} } = error;
  const errortext = codeMessage[response.status] || response.statusText;
  const { status, url } = response;

  if (status === 401) {
    notification.error({
      message: '未登錄或登錄已過期，請重新登錄。',
    });
    // @HACK
    /* eslint-disable no-underscore-dangle */
    window.g_app._store.dispatch({
      type: 'login/logout',
    });
    return;
  }
  notification.error({
    message: `請求錯誤 ${status}: ${url}`,
    description: errortext,
  });
  // environment should not be used
  if (status === 403) {
    router.push('/exception/403');
    return;
  }
  if (status <= 504 && status >= 500) {
    router.push('/exception/500');
    return;
  }
  if (status >= 404 && status < 422) {
    router.push('/exception/404');
  }
};

/**
 * 配置request請求時的默認參數
 */
const request = extend({
  errorHandler, // 默認錯誤處理
  credentials: 'include', // 默認請求是否帶上cookie
});


request.interceptors.request.use(async (url, options) => {
  let token = localStorage.getItem("zone-token");
  const headers = {
    'Content-Type': 'application/json',
    //'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'application/json',  
  };

  if (token) {
    headers['token'] = token;
  } 

  return (
    {
      url: url,
      options: { ...options, headers: headers },
    }
  );
})


request.interceptors.response.use((response, options) => {
  //攔截返回后的特殊處理
  // if(response.data.code == 1000001){
  //   console.log(response.data.msg)
  //   //通過返回的code 提示 token 過期 、token校驗失敗，做相應跳轉
  // }
  return response;
});

export default request;

 

3. 權限及登錄調整

前后台整理中，后在寫。。。。。