编程知识 cdmana.com

Processing of Axios front end encrypted communication

axios Front end encrypted communication processing

Today, let's talk about some time ago , The front end of the project axios The processing of encryption and decryption .

Let's talk about the future of the project , Because of safety requirements , So we have to encrypt all the requests from the front end and communicate with the server application , Of course, the server's response is encrypted , The front end also needs to be decrypted .

One 、 Interceptor InterceptorManager

Meet this need , Maybe from axios In the document , The first thing we thought about was InterceptorManager.

axios.interceptors.request.use(req => {
  // todo  encryption 
})
axios.interceptors.response.use(rsp => {
  // todo  Decrypt 
})

But now the demand has been upgraded , We require the front end to automatically switch encryption or plaintext communication according to the response status code of the server .

Let's look back InterceptorManager Is that ok ?

Of course, this demand is relatively rare in general , But it does exist, doesn't it ? Now let's look at the method 2

Two 、 agent axios.request Method .

Can achieve , But it's still a little more complicated .

import Axios from 'axios/lib/core/Axios'
import axiosBind from 'axios/lib/helpers/bind'
import axiosUtils from 'axios/lib/utils'

// todo  Import   Encrypted securityAxios,  natural defaultAxios.
// todo  Import   Global variables isSecurity Controls whether encryption is required 

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;

Just look at it in this way , At that time, it was on the way. A project chose this way to optimize it .

3、 ... and 、 Packaging custom fetch Method


export function fetch(...args){
  if(isSecurity){
    return securityAxios(...args);
  }
  return defaultAxios(...args);
}

This method is relative to the above method , It's more convenient , But if the project uses axios To operate on , It's too big to change in this way .

Four 、 Customize Adapter

Maybe this is the optimal solution .

import axios from 'axios'

export default ((defaultAdapter) => {
  function security(cfg){
    // todo  Build a new encrypted config;
    return newCfg;
  }
  function unsecurity(rsp){
    // todo  Decrypt the encrypted string returned ;
    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

summary

The above ways , It's all in my actual project , The realization of meeting , Or your own way of dealing with it .

  • Method 1 , It's not enough , Interceptors can easily be too complex ;
  • Method 2 , Too many places ;
  • Method 3 , You need to modify the existing code ;
  • Method four , For the time being, it's most appropriate

Demand continues to escalate , If , After the front-end encryption , Discover that the back end needs to receive plaintext , After switching , Need to ask again , So which is the most convenient way to modify ?

版权声明
本文为[Rust sword Dugu]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224233905281T.html

Scroll to Top