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 */
- Windows.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. 权限及登录调整
前后台整理中, 后在写.....
来源: https://www.cnblogs.com/arlin321/p/11739248.html