How to add interface listening mask in Vue project

1. Business Background

Using a mask layer to shield users' abnormal operations is a method often used by the front end. However, in some projects, the mask layer is not managed uniformly, which will cause the following problems:
(1) All business components must introduce the mask layer component, that is, each .vue business component introduces the Mask component in the template. Components exist in every corner of the project, which is not conducive to management and the code is extremely redundant.
(2) Mask components are scattered throughout the business, so the variables that control whether to display the mask layer are also scattered in the business components. For example, when using maskShow to control whether to display the mask layer, a more complex project will generate 200+ maskShow variables.
(3) There are too many maskShows and they are integrated into the business. At the same time, the maskShow variables are often written in the callback function of the interface. It is common to forget to change the variables, resulting in logical errors in whether the mask layer should be displayed or not.
(4) Projects are often debugged locally, but actually run online. Problems in (3) often cannot be verified locally. Because these problems often occur when the online network environment is poor. For example, after pressing a button, you need to wait for the interface to return before you can click it again. However, since the local return speed is faster, there will be no problem if you forget to add a mask layer. However, if the network is problematic online, this problem can easily occur, and once it occurs, it is difficult to locate, greatly affecting work efficiency.

2. Problem Analysis

Based on the above background, it makes sense to add a common mask layer component for management in actual projects. After analysis, the following issues need to be resolved:
(1) The timing of the mask layer appearing and closing.
(2) Mask component design.
(3) How to introduce the component into the project elegantly without creating coupling.
(4) How to gradually replace the original maskShow method in existing projects without causing large-scale problems.
(5) Details

Component Design

1. When the mask layer appears and closes

This question is determined according to different business needs, but the author believes that the appearance and closing of most masks mainly depends on the request and return of the interface. When an interface is in the request pending state, the mask layer is displayed, and the mask is closed when all interfaces return. This article mainly solves the problem of interface request masking. It is written in ts and does not list all the details.

2. Mask component design

The Mask component is a class that shields the details inside the class.
(1) The main function of the class is to add and delete mask layers and transmit the URL of the current request interface.

class Mask {
 // Display mask layer appendMask(url: string): void{}

 // Delete the mask layer removeMaskl(url: string): void{}
}

(2) Add a mask layer function, call the function when a request is made, and pass in the current interface URL. A monitoring object is maintained inside the function to monitor whether there are any pending requests. The value of this object is the number of pending states of this interface. By assuming that the mask view component has been mounted on the Vue prototype chain, if not, just introduce it above the component.

//Define the data type of the listening object interface HTTPDictInterface {
 [index: string]: number;
}

appendMask(url: string): void{ 

 if (!this.monitorHTTPDict[url]) {
 this.monitorHTTPDict[url] = 0;
 }
 this.monitorHTTPDict[url] += 1;

 // If there is a monitoring interface, display the mask layer if(!this.mask && Object.keys(this.monitorHTTPDict).length){

 // Add a mask layer style to body, $Mask is the mask layer style component const Constructor = Vue.extend(Vue.prototype.$Mask);
 this.mask = new Constructor().$mount();

 document.body.appendChild(this.mask.$el);
 }
}

(3) Delete the mask layer function. This function will be called after each request ends. When it is found that the request monitoring object is empty, the mask layer is deleted. If there is no interface in pending state, delete the connection key. If the object is empty and has a mask layer, delete the mask layer.

removeMask(url: string): void{

 // After successful return if (this.monitorHTTPDict[monitorUrl]) {
 this.monitorHTTPDict[monitorUrl] -= 1;
 if (this.monitorHTTPDict[monitorUrl] <= 0) {
 delete this.monitorHTTPDict[monitorUrl];
 }
 }

 // hasMask is used to detect whether there is a mask layer tag element on the page if (this.mask && this.hasMask() && !Object.keys(this.monitorHTTPDict).length) {
 document.body.removeChild(this.mask.$el);
 this.mask = null;
 }

 this.timer = null;
}

3. How to introduce this component into the project elegantly without coupling.

To use this component, you need to call the appendMask function before all requests are initiated, and call the removeMask function after all requests are completed. There are two calling methods as follows.
(1) Use the callback of components such as axios to complete the function call. However, this approach does not make the Mask component code independent of the project, it depends on the API of the specific interface framework.

instance.interceptors.request.use((config) => {

 // Add mask layer mask.appendMask(config.url);

 return config;
});

(2) Add the init function and inject the callback directly into the native XMLHttpRequest object. Change the native XMLHttpRequest function and inject callbacks into the events 'loadstart' and 'loadend'. It should be noted that the parameters received by loadstart do not contain the URL of the current request, so the open function needs to be rewritten to mount the URL received by open on the new xhr object. Use this method with caution. Because changing the native API is very dangerous and is prohibited in many coding standards, if everyone rewrites the native API, conflicts will arise when these frameworks are introduced at the same time, causing unpredictable consequences.

//Determine whether to use this method by passing parameters init(){
 if (this.autoMonitoring){
 this.initRequestMonitor();
 }
}

// New xmlhttprequest type interface NewXhrInterface extends XMLHttpRequest{
 requestUrl?: string
}

// Native injection initRequestMonitor(): void{

 let OldXHR = window.XMLHttpRequest;
 let maskClass: Mask = this;

 // @ts-ignore, coding standards do not allow modification of XMLHttpRequest
 window.XMLHttpRequest = function () {

 let realXHR: NewXhrInterface = new OldXHR();
 let oldOpen: Function = realXHR.open;

 realXHR.open = (...args: (string | boolean | undefined | null)[]): void => {

 realXHR.requestUrl = (args[1] as string);
 oldOpen.apply(realXHR, args);

 };

 realXHR.addEventListener(`loadstart`, () => {

 const requestUrl: string = (realXHR.requestUrl as string);

 const url: string = maskClass.cleanBaseUrl(requestUrl);

 // Open the mask maskClass.appendMask(url);
 });

 realXHR.addEventListener(`loadend`, () => {

 const responseURL: string = (realXHR as XMLHttpRequest).responseURL;
 const url: string = maskClass.cleanBaseUrl(responseURL);

 // Delete the mask maskClass.removeMask(url);
 });

 return realXHR;
 };
}

(3) Injection usage, call init directly. In this way, all requests to change the project will go through the Mask.

new Mask().init()

4. How to gradually replace the original maskShow method in existing projects without causing large-scale problems.

If it is used directly in the entire project, the area involved will become very wide, causing problems over a large area, which will be counterproductive. Therefore, a gradual replacement approach should be adopted to achieve a smooth transition. The main idea is to decide which pages to introduce the component by configuring pages and blacklists, so that each team member can modify it by themselves. After all, the person in charge of the page is the one who knows the current page business best. As for whether to blacklist or whitelist, it is determined by the specific business of the project.

// key is the routing page that needs to be monitored, value is an array, the interfaces filled in the array are blacklisted interfaces that do not need to be monitored const PAGE_ONE = `/home`;
const PAGE_TWO = `/login`;
const HTTO_ONE = `xxx`

export const maskUrlList = {
 [PAGE_ONE]: [HTTO_ONE],
 [PAGE_TWO]: [],
};

The appendMask method filters blacklisted and unconfigured pages. maskUrlList is the controlled object. It first checks the page route and then checks whether there is a blacklist.

appendMask(url: string): void{

 // Get the path of the current page, get the page path, and distinguish between hash and history modes const monitorPath: string = this.getMonitorPath();

 // maskUrlList is a configuration item. First check the page route, then check whether there is a blacklist if (this.maskUrlList[monitorPath]
 && !this.maskUrlList[monitorPath].includes(url)) {
 if (this.monitorHTTPDict[url] === undefined) {
 this.monitorHTTPDict[url] = 0;
 }
 this.monitorHTTPDict[monitorUrl] += 1;
 }

 // Add mask layerif (!this.mask && this.hasMonitorUrl()) {
 const Constructor = Vue.extend(Vue.prototype.$Mask);
 this.mask = new Constructor().$mount();

 document.body.appendChild(this.mask.$el);
 }
}

5. Details

(1) The mask layer is closed after rendering, and the actual deletion logic of the mask layer is placed in the timer. Vue's asynchronous rendering uses promise, so if the closing is placed after rendering, it needs to be placed in setTimeout. This involves knowledge of the event loop. When the interface returns, if the page needs to be rendered, a Promise will be executed asynchronously. Promise is a microtask, and setTimeout is a macrotask. When the main thread is executed, the microtask will be executed first, and then the asynchronous macrotask setTimeout will be executed.

//Clear the mask layerif (!this.timer) {
 this.timer = window.setTimeout(() => {

 if (this.mask && this.hasMask() && !this.hasMonitorUrl()) {
 document.body.removeChild(this.mask.$el);
 this.mask = null;
 }

 this.timer = null;

 }, 0);
}

(2) '?' for filtering interfaces and '#' in hash mode.

// Get the url of the request interface
getMonitorUrl(url: string): string{
 const urlIndex: number = url.indexOf(`?`);
 let monitorUrl: string = url;
 if (urlIndex !== -1) {
 monitorUrl = url.substring(0, urlIndex);
 }
 return monitorUrl;
}
// Get the current route path
getMonitorPath(): string{

 const path: string = this.mode === HASH_TYPE ? window.location.hash : window.location.pathname;

 let monitorPath: string = path;

 if (this.mode === HASH_TYPE) {
 monitorPath = monitorPath.substring(path.indexOf(`#`) + 1);
 }

 // Screenshot path, delete request parameters const hashIndex: number = monitorPath.indexOf(`?`);

 if (hashIndex !== -1) {
 monitorPath = monitorPath.substring(0, hashIndex);
 }

 return monitorPath;
}

(3) Interface filtering baseUrl. If you are careful, you will find that when using the axios interface, you can decide whether to bring in baseUrl, because axios will perform differentiated filtering when requesting. If the usage is not well defined in the early stage of the project, there will be two different ways to use axios. Then, you need to filter baseUrl.

// Remove baseUrl
cleanBaseUrl(fullUrl: string): string {

 const baseUrlLength: number = this.baseUrl.length;
 return fullUrl.substring(baseUrlLength);
 
}

(4) Component initialization: instantiate the object by passing in params.

new Mask({
 modeType, // hash or history
 autoMonitoring, // Whether to update the native XMLHttpRequest object maskUrlList, // Configure the imported pages and interfaces baseUrl, // The baseUrl of the current project
 ...
}).init()

IV. Conclusion

This article introduces the background, problems and design solutions of unified mask layer. However, not all details are listed, and this needs to be selected based on actual business. But the general plan has been listed:
(1) The mask layer should be displayed when some interfaces are pending and automatically closed after all interfaces return. The interface here refers to the interface that needs to be monitored. (2) The two most important functions of the component are appendMask to add a mask layer and removeMask to delete a mask layer.
(3) If you want the Mask to be completely independent and do not want to rely on callbacks from a third-party library (axios), you can directly rewrite XMLHttpRequest, but this is very risky and is not recommended.
(4) Component replacement unifies the way team members configure their own routing and listening interfaces. The logic here can be determined by yourself. If there are many interfaces to be monitored, a blacklist can be used, otherwise a whitelist can be used.
(5) Optimized rendering, request parameters, and routing modes.

This is the end of this article on how to add interface monitoring masks in Vue projects. For more relevant Vue interface monitoring mask content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!