Frontier: hello everyone, I am tree sauce 🌲, long time no see. The purpose of this paper is to review some problems encountered in last year’s portal construction based on qiankun micro-front-end architecture. You may think: “Wow, is this a problem? It’s too easy. I want to share how the solutions are being solved in my cognitive system. If you have better suggestions for some of these solutions, feel free to leave a comment in the comments section

The figure above shows some problems encountered in the landing process. Next, I would like to share with you how my cognitive system solves these problems

1. How to apply permission control?

Permission control is generally divided into route permission and button permission (visual permission). The following is an example

  • Routing permission: For example, when A user logs in from the portal and wants to access application A or A menu page under application A, but the user does not have the access permission of the application, we need to intercept it and prevent it from entering

  • Button permission (view permission) : For example, when a user does not have the permission to delete a resource, we will hide the original delete operation button to realize the button

👦 Ahmin: How do we know whether we have permission or how to distinguish resource types?

🌲 : Mark, first we define a code for each resource, which you can think of as a unique identifier for the resource, its id, for example, we might be an application, menu or button. Rules can be used to distinguish different types of resources, for example, 👇

1.1 Route Permission

👦 Ah Le: So the coding rules are determined, how do we control them?

🌲 : Let’s assume that a user has access to a collection of resources

[appliction: monitor, menu: monitor: the flume, the button: monitor: the flume: delete]

First, the routing permission control is mainly used to determine whether the user has access to the application or menu. We can intercept the router. BeforeEach navigation guard in two cases

  • Dynamic routing: The route was not originally added, but is dynamically added according to the resource code mentioned above. Please refer to 🌲 tree paste before writing about the front-end permission control of the portal

  • Static routes: Has good initialization routing, through unified in portal routing according to the main application of resource access code to determine whether the current user access application access, if you don’t have to intercept, as shown in the following is the main portal application right by processing, because when the applied load, the main application will hijack the original book application of routing, for example 👇 as follows

The hasPerssion method in the figure above is to determine whether the user has access permission by determining whether the user has the resource code of an application. Essentially, it is new RegExp regular matching. If the user does not have access permission, the user will jump to the page without access permission

1.2 Visual Permissions

Ahmin: What about button permissions? How to deal with

🌲 : also need to rely on the resource coding, and then through custom instructions, such as V-perms to control, command source can be clicked 👉 command control as shown in the following figure is the specific use of a button

As for the V-Perms instruction, how do we reuse it for each sub-application, injecting it into the sub-application lifecycle through the portal host application, which receives the following 👇

You mentioned that the permission control of the button is based on

🌲 : The principle of the render function is the same, but the command is changed in a way, through the tool library wrapper findPermission function, to control the style display attribute value, of course, you can also use the main application to sub application in the way of injecting a tool function, so as to achieve reuse. As shown below 👇

2. Monitor application exceptions

When the portal is landed, how to monitor the abnormal information of sub-applications is very important. After all, different environments may have different situations, so how to track and locate?

We found in the API documentation of qiankun addGlobalUncaughtErrorHandler method, used to monitor global uncaught exception

For example, if I want to listen for an application load failure, I can catch the message in the error message to do a regular match

Then through bus communication, the notification page displays the application loading failure page, as shown below

👨🎓 Ahho: How do you report abnormal information?

🌲 : we are through the sentry do exception information reporting, sentry itself can do the exception handling, but in order to let the son can unified capture application exception information, make unified exception information maintenance and management, and so did in the addGlobalUncaughtErrorHandler active report

If you want to understand how sentry is repackaged, you can read the front-end monitoring stuff that tree jam wrote before, right

3. How to integrate new sub-applications quickly

We know that the sub-application in Qiankun architecture needs to be integrated into the main application by creating life-cycle functions, such as Mounted, and modifying packaging methods. So how do you quickly integrate a new child application?

We build a simple scaffold tool, maintain the related functions with a set of templates, and then create a new project by maintaining the template, and essentially pull the template, as shown in the picture below

For detailed development, see the Front End Stuff, developing simple scaffolding from 0 to 1

4. How to dynamically register an application?

Cutting edge: In order to allow the main application to access different sub-applications, we need to define the entry and access name of each sub-application in the configuration file, so as to register the sub-applications. We generally have different configurations for different environments, as shown in the following figure

👨🎓 Ah Bin: In this case, every time you modify entry of a subapplication or add a new subapplication, you have to recompile the portal, the main application

🌲 : Yes, local configuration is such a problem, we can set up a configuration center to maintain, and then through the way of interface call to obtain different environments, like the following 👇

5. Problems encountered during deployment

Frontier: Deploying a microfront-end architecture portal involves private cloud deployment, public cloud deployment, container-based deployment, and more. Some problems along the way

5.1 How can a Primary Application Load A Sub-Application Static Resource across Domains?

In essence, the master application obtains the static resources of the sub-application through fetch, and then resolves the static resource information of the sub-application through the re, and then fetch comes down. Therefore, these static resources must be required to support cross-domain. How to configure it, as shown in the figure below, allowing the source through setting

Access-control-allow-origin: Cross-domain Origin is not allowed on the server. Nginx can accept all Origin requests only by configuring access-Control-allow-origin *.

5.2 Does the Active Application Fail to Load the Static Resources of the Sub-Application because the Static Resources of the Active Application Are Not Up-to-date?

In essence, the child application updates the code, and when the main application fetches the resources of the child application, it loads the resources into the cache, so the resource fails to be loaded. How to solve this problem? We can set cache-control in the child application’s Nginx to check for updates every time a resource is requested.

5.3 How do I Make each sub-application have a Common NGIXN configuration?

In order to solve the above problems and ensure universality, it is possible to create the same nginx configuration for each child application. In this case, you can define the nginx configuration in dockerfile and type nginx.conf into the container when packaging it

5.4 How can I Correctly Deploy primary Applications and Sub-Applications?

There are two main schemes:

  • 1. Deploy the primary application and sub-application on the same server

This applies to a company with a small number of servers, and the core is to deploy the main application in a tier 1 directory and other sub-applications in a tier 2 directory

  • 2. Deploy the primary application and sub-application on different servers

This situation is divided into two types: one is that all child applications run on the same server; the other is that different child applications run on different servers independently.

Finally, the above two ways are both good and bad, depending on whether you build a system based on internal IP access or external access domain name, according to the actual situation. In the case of internal system construction, the sub-applications mainly use internal access IP, and the sub-applications are on independent servers, so there is no need to configure too many domain names. Then scheme 2 can be directly used. If it is external and the domain name is limited, scheme 1 May be more appropriate.

The specific configuration mode has been updated from the official website of Qiankun. Please refer to 🔗 and I will not repeat the introduction here

Previous popular articles 📖 :

  • Developing visual Data Screens from 0 to 1 (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Hello, I am 🌲 tree sauce, please drink a cup 🍵 remember three lian oh ~

1. Remember to click a thumbs-up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨