Vue element admin is a background front-end solution, which can be used to quickly build the enterprise background. Today I want to talk about how to realize our background dynamic authority verification based on this framework.
The back-end interface layer needs to complete the user’s final authentication. That is, when the client requests our API, the background needs to correctly judge whether the user has the access rights of the interface in the interceptor layer, which is irrelevant to the front end. Here, we generally use role-based access control. The authority is the smallest unit, and its combination can be assigned to a certain role. For a certain account, it can have multiple roles, so as to realize the back-end access control.
The front-end interface layer, according to the configuration of the background, needs to realize the dynamic access control of the left route and sidebar in the background, so we also need to introduce the menu layer, which is in the @ / router/ index.js This file can be configured.
There are two kinds of routing,
constantRoutes：Represents those routes that do not need dynamic judgment permissions, such as login page, 404, and other general pages.
asyncRoutes：Dynamically judge permissions on behalf of those requirements and pass
addRoutesDynamically added pages.
What we focus on is:asyncRoutes。This requires us to configure through the background, so that the front-end can dynamically display according to the background configuration.
stay index.js In this file, the front-end menu objects are maintained. The roles under each menu object control the access rights of the route. This is the key to realize the dynamic permissions of the front-end.
In this menu object, each menu can be set with a variety of properties. For the background, we only need to maintain part of the information. Finally, we can merge with the front-end routing according to the key information. For example, we can maintain the routing address of the menu.
Vue element admin will automatically generate the left dynamic route for us according to the current user role. What we need to do is: in the user login layer, we can get the menu list maintained in the background and the menu list in the front end for merge, so that the role can be set well before generating the dynamic route.
In front of that, we discussed the authentication of the front end and the back end from a macro perspective. Next, we used JWT to implement the background user authentication mechanism in the login layer. The subsequent request verification can be authenticated according to the token. There is no requirement here, but also can be based on Asymmetric encryption for login authentication.
Finally, there are some details, such as the prompt layer of the system. Here, we need to prompt the corresponding error according to the status code returned by the back end in the response interceptor of the front end. Here, we can directly use the HTTP status code to judge. For example, if the user’s login is expired, the interface access is limited, and the form verification error, different prompts and error details, and even processing methods should be given.
For more about Vue element admin tutorial, please refer to Tencent classroom video tutorial
Background authority verification system based on Vue element admin