前言

基于公司项目扩展出来的一个技术方案，项目是农牧项目，项目中的权限为: 单位 > 猪场 > 用户 , 下面的技术方案是解决开发过程中切换到有问题的单位和猪场，根据特定数据快速复现bug的场景

遇到的问题

1. 在做一个猪场项目的时候，由于项目本地代码中启动的生成的 Token 和线上测试环境不一致需要手动修改 Token 的配置信息，重新启动前端项目，才能模拟线上测试环境的数据。

2. 经常需要切换测试环境不同的单位和猪场，分析不同的猪场中数据导致的问题，本地运行的前端项目复现过程中，每次都需要手动粘贴测试环境的单位猪场等数据到本地，然后重新启动项目生成对应的 Token ，时间代价太高。

思考

由于前端页面获取不同场的数据，是通过接口里的不同 Token 来获取对应数据的，能否通过比较方便的方式更换接口的 Token 信息来实现获取不同的猪场数据？

解决方案

当前的项目后端接口根据请求头中的 Authorization 的 Token 值来获取对应单位猪场下的数据。在浏览器的扩展工具中搜了一下请求头工具，发现 Header Editor 工具满足需求，下面就来看下这个工具的在项目中的使用

以 Microsoft Edge 浏览器为例，通过配置 authorization 的数据值的方式实现本地(localhost)接口请求 Token 修改

安装 Header Editor

1. 安装 Header Editor 扩展工具，浏览器右上角打开 ··· -> 扩展

   

2. 点击 管理扩展

   

3. 点击 获取 Microsoft Edge 扩展

   

4. 搜索 Header Editor 扩展工具

   

5. 点击 获取 安装

   

6. 点击 获取 后, 点击 添加扩展

   

7. 添加成功后，在浏览器右上角就能看到了，这时候就安装成功

   

使用 Header Editor 修改请求头

1. 使用需要联调的用户登录线上测试环境，打开一个猪企网的单据，找一个需要传 Token 的接口，复制 Authorization 里面的数据

   

2. 启用 Header Editor ，点击管理

   

3. 点击右下角 加号按钮 新增拦截规则

   

4. 规则配置

   • 规则类型 选择 修改请求头

   • 匹配类型 选择 网址前缀

   • 匹配规则 输入后端的测试环境接口前缀 https://xxx.test.xxx.com

   • 执行类型 选择 常规

   • 头名称 选择 authorization

   • 头内容 输入刚才复制的 Token

   

5. 保存后如下效果配置就成功了

   

6. 在本地运行的项目刷新一下页面，接口的 Authorization 的值如果和线上测试环境一致说明请求拦截修改成功了

思路扩展

也可以用 Fiddler 等工具进行接口拦截修改参数达到测试目的

注意！！！

因为做的是接口的全局拦截，因此测试环境切换账户或者 Token 过期需要刷新的时候需要关掉 Header Editor 的配置

如果有其他更简单的解决方案，欢迎大家评论区讨论交流，一起学习共同进步 ^-^