antd pro v5 设置请求头参数、全局错误提示、publicPath、设置mock、代理等网络设置

洋漾 2023-08-05 AM 1403℃ 0条

> 今天把网络方面的统一汇总

### 1、设置请求头参数
> 登录后token 统一放在请求头

* 在文件/src/requestErrorConfig.ts 写方法
```
export const tokenInit:RequestInterceptor = (url: string, options: RequestOptionsInit) => {
  const accessToken = localStorage.getItem("accessToken") || ''
  const o = options
  o.headers = {
    ...options.headers,
    accessToken,
  }
  return {url, options: o}
}
```
* 在文件/src/app.tsx 引入此方法并配置
```
request = {
    ...errorConfig,
    requestInterceptors: [tokenInit],
  };
```

### 2、全局错误提示
> 减少前端对每个接口判断，在文件/src/requestErrorConfig.ts 中

* 新增拦截器
```
export const errorConfig: RequestConfig = {
  // 响应拦截器
  responseInterceptors: [
    (response) => {
      // 拦截响应数据，进行个性化处理
      const { data } = response as unknown as ResponseStructure;
      if (data?.code !== 0) {
        const error: any = new Error(data?.desc);
        error.name = 'ResponseError';
        error.desc = data.desc;
        error.code = data.code;
        throw error; // 抛出自制的错误
      }
      return response;
    },
  ],
}
```

* 错误接收及处理
```
export const errorConfig: RequestConfig = {
	errorConfig: {
   		 errorHandler: (error: any, opts: any) => {
			if (error.name === 'ResponseError') {
				//弹框提示错误描述
				message.error(error?.desc || "请求异常");
				//无token或token失效跳登录页
				if (error.code === 403 || error.code === 401){
				  history.push("/user/login");
				}
			}
		}
	}
}
```

### 3、publicPath设置
> 部署服务端可能不是直接在域名根目录下，这时候用上publicPath设置定义资源的基本路径
`比如域名htts://xxx.com/admin`
* 在文件/config/config.tx 下新增publicPath设置
```
export default defineConfig({
	  publicPath: '/admin/'
})
```

### 4、代理设置
> 本地远程调用服务端

* 在文件/config/proxy.tx
```
export default {
dev: {
    '/api': {
      // 要代理的地址
      target: 'http://xxxx.com/',
      // 配置了这个可以从 http 代理到 https
      // 依赖 origin 的功能可能需要这个，比如 cookie
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
}
```
然后运行 yarn run dev 即可

### 5、mock设置
> 系统自带mock，yarn run start 便是运行mock
因为部署接口有base_url，比如http://xxx.com/admin/api/xxx。中间有admin，如果每个mock都写一遍admin/api/ 感官不是很好，例如下面截图：

![](https://blog.cnccy.com/usr/uploads/2023/08/881367409.png)

追求极致的我想到在请求时域名后面自动拼上后缀/admin 这样无须在mock里加上这个admin

* 在package.json 修改命令 `REACT_APP_ENV=mock`
```
"start": "cross-env REACT_APP_ENV=mock UMI_ENV=dev max dev",
```

* 在文件/src/requestErrorConfig.ts 
```
export const errorConfig: RequestConfig = {
	  baseURL: REACT_APP_ENV === "mock" ? '' : "/admin",
}
```

* 而后就可以优雅的把mock中admin去掉
![](https://blog.cnccy.com/usr/uploads/2023/08/3898891223.png)

标签: react, antd pro

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://blog.cnccy.com/195.html

上一篇 ant design pro v5 自定义菜单、设置菜单宽度、菜单栏颜色

下一篇没有了

评论啦~

做难事必有所得，别让平淡杀灭你的志气2021年11月20日 23:05:39
专注、自省、简单朴实、自律、艰苦奋斗、坚韧、舍得放权、淡泊名利、居安思危、终身学习2021年07月06日 10:47:00
懂得越多，越发觉懂得越少。2021年02月05日 19:58:59
小米即时消息mimc很赞，文档链接：https://admin.mimc.chat.xiaomi.net/docs/2020年04月05日 20:59:00

antd pro v5 设置请求头参数、全局错误提示、publicPath、设置mock、代理等网络设置

评论啦~

广而告之

栏目分类

博主动态 ~

标签云

antd pro v5 设置请求头参数、全局错误提示、publicPath、设置mock、代理等网络设置

 评论啦~

广而告之

 栏目分类

博主动态 ~

标签云

评论啦~

广而告之

栏目分类

博主动态 ~

标签云