axios前端加密通讯的处理
今天谈一谈前段时间,项目中遇见的前端axios加解密的处理。
先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。
一、拦截器InterceptorManager
遇见这个需求,或许从axios文档中,我们第一时间想到的就是InterceptorManager。
axios.interceptors.request.use(req => { // todo 加密})axios.interceptors.response.use(rsp => { // todo 解密})
但是现在需求升级了,我们要求前端根据服务端的响应状态码自动切换加密或者明文通迅。
我们再回过头看看InterceptorManager
还合适么?
当然这个需求在一般情况下是比较少见的,但是确实存在不是么?接下来我们看看方法2
二、代理axios.request方法。
可以实现,但是还是略为复杂。
import Axios from 'axios/lib/core/Axios'import axiosBind from 'axios/lib/helpers/bind'import axiosUtils from 'axios/lib/utils'// todo 导入 加密的securityAxios, 正常的defaultAxios。// todo 导入 全局变量isSecurity控制是否需要加密async function requestProxy(...args) { if(isSecurity){ return await securityAxios.request(...args) } return await defaultAxios.request(...args)}function createInstance(defaultConfig) { const context = new Axios(defaultConfig); Object.defineProperty(context, 'defaults', { get() { return isSecurity ? securityAxios.defaults : defaultAxios.defaults; }, }) context.request = requestProxy; var instance = axiosBind(requestProxy, context); axiosUtils.extend(instance, Axios.prototype, context); axiosUtils.extend(instance, context); return instance;}const axiosInstance = createInstance();axiosInstance.axios = axiosInstance;export default axiosInstance;
这种方式看看就好了,当时是半路接过来某项目选择了这种方式简单优化下。
三、包装自定义的fetch方法
export function fetch(...args){ if(isSecurity){ return securityAxios(...args); } return defaultAxios(...args);}
此方法相对上面的方法,实现更方便,但是如果项目中使用的是axios的实例去操作,则这种方式修改的地方太大了。
四、自定义Adapter
大概这种方式是最优解了。
import axios from 'axios'export default ((defaultAdapter) => { function security(cfg){ // todo 构建新的加密后的config; return newCfg; } function unsecurity(rsp){ // todo 解密返回的加密串; return newRsp; } return function securityAdapter(config){ const securityConfig = security(config) const resp = defaultAdapter(securityConfig) return unsecurity(resp) }})(axios.default.adapter)
import securityAdapter from './securityAdapter'const securityAdapter = axios.create({ adapter: securityAdapter,})// todo
总结
以上几种方式,都是我实际项目中,遇见的实现方式,或是自己的处理方式。
- 方法一,不够解藕,拦截器很容易过于复杂;
- 方法二,过于繁所;
- 方法三,需要修改现有的代码;
- 方法四,暂时来看是最合适的
需求继续升级,如果,前端加密后,发现后端需要接收明文,切换后,需要重新请求,那么哪种方式修改起来最方便呢?
原文转载:http://www.shaoqun.com/a/503916.html
moss:https://www.ikjzd.com/w/1653
香港会计师事务所:https://www.ikjzd.com/w/2434
axios前端加密通讯的处理今天谈一谈前段时间,项目中遇见的前端axios加解密的处理。先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。一、拦截器InterceptorManager遇见这个需求,或许从axios文档中,我们第一时间想到的就是InterceptorManager。axios.intercept
mile:mile
aicpa:aicpa
南海一号博物馆要门票吗?门票是多少?:南海一号博物馆要门票吗?门票是多少?
黑龙江特产_东北特产推荐 :黑龙江特产_东北特产推荐
惠州到云南罗平九龙瀑布旅游如何走?:惠州到云南罗平九龙瀑布旅游如何走?
No comments:
Post a Comment