antd pro v5 设置请求头参数、全局错误提示、publicPath、设置mock、代理等网络设置
> 今天把网络方面的统一汇总 ### 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)
#### 1、从服务端请求菜单 > 写死的菜单数据可能满足不了我们的需求，我们可以在 src/app.tsx 定义 layout 对象 ``` // https://umijs.org/zh-CN/plugins/plugin-layout export const layout: RunTimeLayoutConfig = ({ initialState }) => { return { menu: { request: async () => { //登录后的当前用户菜单数据已经获取到，直接返回菜单数组即可，无须再请求一次菜单列表 return initialState?.currentUser?.menuList; }, }, }; }; ``` 但是如果使用icon，会增加打包的大小，建议使用https://www.iconfont.cn/ ![](https://blog.cnccy.com/usr/uploads/2023/08/2252581519.png) ![](https://blog.cnccy.com/usr/uploads/2023/08/1321977648.png) 即可使用icon标签显示 ------------ #### 2、设置菜单栏宽度 > 框架的菜单栏宽度较长，在/src/app.tsx文件下新增参数 ![](https://blog.cnccy.com/usr/uploads/2023/08/1499508912.png) #### 3、菜单栏颜色 > v5版本开始后，菜单栏颜色跟主题颜色已经分开，可以参考链接：https://procomponents.ant.design/components/layout#sider-token 可以在 config/defaultSetting.ts 定义 sider 对象 ![](https://blog.cnccy.com/usr/uploads/2023/08/3514125158.png)
> 阿里巴巴开源的Admin框架，目前算是最主流的。 该套模板是使用了React开发框架作为基础，下面我们梳理一下从零开始运行起来这个项目的过程。 需要参考四个地址： 官方git地址：https://github.com/ant-design/ant-design-pro/ 官网：https://pro.ant.design/zh-CN/ 模板组件：https://procomponents.ant.design/ 设计组件：https://ant.design/index-cn 我是直接下载git地址master分支 贴一下主要的版本 ![](https://blog.cnccy.com/usr/uploads/2023/08/3092308368.png) * 启动项目 `npm run start` ``` ├── config # umi 配置，包含路由，构建等配置 ├── mock # 本地模拟数据 ├── src │ ├── components # 业务通用组件 │ ├── pages # 业务页面入口和常用模板 │ ├── services # 后台接口服务 │ ├── utils # 工具库 ├── README.md └── package.json ```