Frontier: hello everyone is good, I am tree jam 🌲, long time no see. This article is mainly for the purpose of review, in last year’s Qiankun micro-front-end architecture based portal construction, encountered some problems, you may think: “Wow, is this a problem? Too simple.” It’s about sharing how it worked out in my perception system, and if you have better suggestions for some of these solutions, be sure to leave them in the comments section

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

1. How to control the application permissions?

Permission control is generally divided into routing authority, button authority (visual authority), etc. The following examples illustrate

  • 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 block it and do not let it enter
  • Button permission (view permission) : For example, when a user does not have the right to delete a resource, we will hide the original delete operation button to achieve the button

👦 Ah Min Student: Then how do we know whether there is permission or not, or how to distinguish resource types?

🌲 : Mark, first we define a code code for each resource, you can think of it as the unique mark of this resource, its identity ID, such as we may be an application, a menu or a button. For different types of resources, rules can be used, such as 👇

1.1 Routing permission

👦 ah Le classmate: that code rules determined, how do we control it?

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

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

In order to determine whether the user has access to an application or menu, we can intercept router.beforeeach navigation guard in one of two cases

  • Dynamic Routing: The route was not added before. The route is added dynamically according to the resource encoding mentioned above
  • Static routing: 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 determines whether the user has access to the resource code of an application. This is essentially a new Regexp regular match. If the user does not have access to the resource code, it will jump to the page with no access permissions

1.2 Visual Rights

Ah Min: What about the button permissions? How to deal with

🌲 : Also depends on the source code and is controlled by custom directives such as v-perms

As for v-perms instructions, how do we reuse them for each child application, injecting them into the child application lifecycle through the portal host application, which receives the following 👇

Ah Min: Tree Sauce, the button permission control you mentioned above is based on
<template>What about direct render to the render function?

🌲 : The render function works the same way, but in a different way, by encapsulating the FindPermission function in the library to control the style display property value. Of course, you can also reuse it by injecting a utility function in the same way that the main application instills a child application. See 👇 below

2. Abnormal monitoring of the application

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

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 that fails to load, then I can catch the message in the error message to do a regular match

Then through Bus communication, the notification page displays the application load failure page, as shown below

👨 zhan hao classmate: that you how will abnormal information report?

🌲 : 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

3. How can new sub-applications be integrated quickly

Preface: We know that in order for sub-applications to be integrated into the main application in the Qiankun architecture, there is a need to create lifecycle functions, such as mounted functions, and modify packaging methods. So how do you quickly integrate new subapplications?

We do this by building a simple version of the scaffolding tool, maintaining the related functions with a set of templates, and then using the maintained template to create a new project through the scaffolding, essentially pulling the template, as shown in the figure below

### # 4. How to dynamically register an application?

Frontier: In order for 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 to register the sub-applications. We usually have different configurations for different environments, as shown in the figure below

In that case, every time you change the entry of a child application or create a new child application, you have to recompile the portal as the main application

🌲 : Yes, there is such a problem with local configuration, we can build a configuration center to maintain, and then through the interface call to get the different environment, as shown below

5. Problems encountered during deployment

Frontier: Deploying a micro-front-end architecture portal involves private cloud deployment, public cloud deployment, container-based deployment, and more. There are some problems along the way

5.1 How to cross – domain static resources of the main application loader?

In essence, because the main application obtains static resources of the child application through FETCH, and then through regular parsing to obtain static resource information of the child application, and then FETCH down, these static resources must be required to support cross-domain. How to configure them, as shown in the figure below, by setting the allowed source

Access-Control-Allow-Origin: Cross-domain is not allowed on the server. Nginx can only be configured with Access-Control-Allow-Origin * to enable the server to accept all Origin sources.

5.2 The static resources of the main application loader child application are not up to date, resulting in load failure?

In essence, the child application updates the code, and the master application fails to load the cached resources during the fetch of the child application resources. How to solve this? We can set Cache-Control in nginx, a child application, to check for updates every time a resource is requested.

5.3 How to make each child application have a common ngIXN configuration?

To solve this problem and keep it generic, you can configure the same nginx configuration for each child application. This can be defined in a dockerfile, and nginx.conf can be packaged into the container as well

5.4 How to properly deploy master and child applications?

There are two main solutions:

  • 1. Deploy the main and child applications to the same server

This situation is suitable for a small number of corporate servers, where the core is to deploy the main application in a tier 1 directory and the other sub-applications in a tier 2 directory

  • 2. The main and sub-applications are deployed on different servers

There are two types of cases where all the children are on one server, or different children are running independently on different servers.

Finally, the above two ways are good or bad, depending on whether the system you build is mainly based on internal IP access or external access to the domain name, to apply according to the actual situation. If it is an internal system construction, the sub-applications mainly access IP internally, 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 domain names are limited, then scheme 1 May be more appropriate.

The specific configuration method has been updated on the official website of Qiankun. Please refer to the document of 🔗, which will not be repeated here

Hello, I am 🌲 tree sauce, would you like to drink a drink to remember three lian oh ~

1. Remember to hit the “like” button when you’re finished reading this book. It’s 👍

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. The article is on GitHub frontendThings thanks to Star✨