Songo previously wrote a post about handling permissions in front – and back-end separation development:

  • Spring Boot + Vue before and after the separation of development, permission management ideas

However, some friends have some doubts about the dynamic menu when they are learning the micro personnel project recently (that is, different users will see different menu items after logging in successfully). Therefore, Songge plans to write another article to talk about the dynamic menu problems in the development of the front and back end separation.

1. A principle

To do permission management, a core idea is the back-end to do permission control, front-end to do all the work is just to improve user experience, we can not rely on the front to show or hide a button to achieve permission control, it is certainly not safe.

For example, users need to enter email addresses when registering, but after front-end verification, the back-end verification is still required. The two verification purposes are different. Front-end verification is to improve response speed and optimize user experience, while back-end verification is to ensure data integrity. The same is true for permissions management. The front buttons are only shown/hidden to improve the user experience, while the real permissions management needs to be implemented by the back end.

This is a very important point, to do the back-end separation of the development of permission management, we first need to establish the above framework, and then within this framework, to consider other issues.

Therefore, I will share with you two ways to implement dynamic menus, which are only about how to better present menus to users, rather than about permission management, which is done and must be done on the back end.

2. Implementation

Once you have this framework in place, you will find that there are many ways to implement dynamic menus.

Dynamic menu is the menu that the user sees after logging in. The user who does not use the role will see the menu item after logging in successfully. How to implement this dynamic menu? In general, there are two different approaches, both of which have worked in the projects that Songo has worked on, and I want to share them with you.

2.1 Back-end Dynamic Return

Back end dynamic return, this is the solution I use in micro personnel. In micro personnel, there are five tables related to authority management, as follows:

Hr table is user table, after the user login successfully, you can query to the user’s role, according to user role to check out the user can operate the menu (resources), can then put these operating resources, organized into a JSON data, returned to the front, the front according to the JSON apply colours to a drawing gives the corresponding menu. For example, we return JSON data in the following format:

[{"id":2."path":"/home"."component":"Home"."name":"Staff Information"."iconCls":"fa fa-user-circle-o"."children":[
            {
                "id":null."path":"/emp/basic"."component":"EmpBasic"."name":"Basic Information"."iconCls":null."children": []."meta": {"keepAlive":false."requireAuth":true}}]."meta": {"keepAlive":false."requireAuth":true}}]Copy the code

Such JSON is ready to use after a secondary processing in the front end, where the string value of the Component property is converted into an object. The tiny personnel of a specific operation you can reference project (specific at: https://github.com/lenve/vhr/blob/master/vuehr/src/utils/utils.js), I will not be here.

One advantage of this approach is that the front-end judgment logic is less, the back end is not complex, is a SQL operation, the front end to get the back end of the menu data, a little processing can be directly used. Another advantage of this approach is that the resource-role and user-role relationships can be dynamically configured to adjust the resources (menus) that users can manipulate.

2.2 Front-end dynamic rendering

The other way is front-end dynamic rendering. In this way, the back-end work is easier, but the front-end processing is more difficult. Songko helped a law firm to build a management system at the end of last year, because of the easy access, I adopted this scheme.

In this way, I directly define all the pages in the routing table in the front end, and then define which roles are required to access each page in the meta attribute, for example:

[{"id":2."path":"/home"."component":Home,
        "name":"Staff Information"."iconCls":"fa fa-user-circle-o"."children":[
            {
                "id":null."path":"/emp/basic"."component":EmpBasic,
                "name":"Basic Information"."iconCls":null."children": []."meta": {"keepAlive":false."requireAuth":true."roles":['admin','user']
                }
            }
        ],
        "meta": {"keepAlive":false."requireAuth":true}}]Copy the code

This definition means that the current logged-in user needs to have the admin or user role in order to access the EmpBasic component. Of course, it does not mean that I have defined it this way. This definition is just a tag. In combination with the role required by the current component, to decide whether to render the corresponding menu item of the current component.

That way, the back end only needs to return the current user’s role after a successful login, and the front end takes care of the rest. However, the drawback of this approach is that the relationship between the menu and the character is dead in the front-end code, and if you want to adjust it dynamically in the future, it will be inconvenient and may need to change the code. Especially for large projects, when the authority is more complex, it is more troublesome to adjust, so I generally recommend using this method in some simple projects.

3. The conclusion

Although I have used the first method in micro-personnel, if the partner is a new project and the permission problem is not very complicated, I still suggest to try the second method, which feels more convenient.

In a company, however, the decision to do dynamic menus on the front end or the back end may result in a process of cross-pollinating the front and back end teams, with the winner saving a few lines of code.

Pay attention to the public account [Jiangnan little Rain], focus on Spring Boot+ micro service and front and back end separation and other full stack technology, regular video tutorial sharing, after attention to reply to Java, get Songko for you carefully prepared Java dry goods!