Vue2.0 user rights control solution

• Vue 2.0 x
• Vue-router 3.x

// run dev // build NPM buildCopy the code

At the beginning of the session, a Vue instance with only login route is initialized. The route is directed to the login page in the root component created hook. When the user logs in successfully, the front-end gets the user token. Configure the AXIos instance to add {“Authorization”:token} to request headers for user authentication, and then obtain the permission data of the current user, including the route permission and resource permission. Then dynamically add the route, generate the menu, and implement the permission instruction and global permission verification method. Adding a request interceptor to the AXIOS instance completes the permission control initialization. After the route is dynamically loaded, the route component is loaded and rendered, and then the front-end interface is displayed.

The created hook of the root component is responsible for checking whether there is a local token. If there is a local token, the created hook of the root component directly obtains permission and initializes the token without logging in. If the token is valid and the current route has access, The routing component is loaded and rendered correctly; If the current route does not have access, redirect 404 according to route Settings. If the token fails, the backend should return a 4XX status code, and the front-end should add an error interceptor to the AXIOS instance. When the 4XX status code is encountered, an exit operation is performed to clear the sessionStorage data and jump to the login page for the user to log in again.

/ / / SRC / | - API interface file | | - index. The js / / output common example axios | | - the js / / organization according to the business module interface file, All interface reference. / index provide instances of axios | - assets / | - components / | - the router / | | -- fullpath. Js / / complete routing data, Routing permissions have to match the user's actual routing | ` -- index. | js / / output based routing instance -- views / | - App. Vue, -- the main. JsCopy the code

Route control includes dynamic route registration and dynamic menu generation.

Routing data can be directly used to generate the navigation menu, but the routing data in the root component, navigation menu exists in the index. The vue component, obviously we need to somehow share the menu data, there are many ways, the first thought is generally Vuex, but the menu data in the process of the whole user session will not change, This is not the best use of Vuex, and in order to minimize unnecessary dependencies, the simplest and most straightforward method is to attach the menuData to the root component data.menudata and get it from the home page with this.$parent.

In addition, navigation menus may require column ICONS. This can be achieved by adding meta data to the route, such as the icon class or Unicode stored in the route meta. The meta data can be accessed in the template and used to generate icon labels.

In many roles in the system may encounter one problem is that different roles have a same name but different routing functions, such as system administrators, and the enterprise administrator has “account management” this route, but their operation permissions and target is different, in fact is two completely different interface, and the Vue does not allow multiple routing of the same name, Therefore, the name of the route must be differentiated, but it will be ugly to display the differentiated name in the front menu. To ensure that different roles can share the same menu name, we only need to set the meta. Name of the two routes to “account Management” and use meta.

See views/index.vue for details of the menu.

Validation method implementation itself is very simple, no more than is given according to the backend resource permissions do judgment, the focus is on optimization method of input and output, improve ease of use, through the practice final solution is used, the power to request maintenance at the same time, the validation method receives the request object array as a parameter, whether return Boolean values with permissions.

Request object format:

Const request = {p: ['get,/accounts'], r: params => {return instance.get(' /accounts', {params})}}Copy the code

The permission validation method $_has() is called in this format:

v-if="$_has([request])"
Copy the code

See vue.prototype. $_has method in app.vue for a concrete implementation of the permission validation method.

Permissions to verify the method with global, can in the project is very easy to implement with v – if the element display control, the advantages of this approach is flexible, besides can check permissions, can also add runtime state in judging expressions do more diversity of judgment, and can take full advantage of the characteristics of v – if the response data changes, realize the dynamic view control.

For details, please refer to the relevant section of background system permission control based on Vue.

Request control is realized by using AXIos interceptor, which aims to intercept the unauthorized request at the front end. The principle is to judge whether the request conforms to user permissions in the request interceptor, so as to decide whether to intercept or not.

Method and request.url are consistent. Wildcard characters are required for URLS with parameters. The wildcard format needs to be agreed by the front and back ends according to project requirements. The interceptor should first process the URL with parameters into the convention format, and then determine the permission. The solution has implemented the following two wildcard formats:

/resources/:id example: /resources/1 URL: /resources/** Format: /store/:id/member Example: /store/1/member URL: /store/*/member Description: A parameter is inserted between two nouns. The parameter usually indicates the ID of the first nounCopy the code

Note that if you want to make a request with the URL “/aaa/ BBB “, it will be processed as “/aaa/**” by default for permission verification. If “BBB” is not a parameter but part of the URL, then you need to change the URL to “/aaa/ BBB /”. A “/” at the end indicates that the URL does not need to be formatted.

See the setInterceptor() method in app.vue for a detailed implementation of the interceptor.

If your project requires additional wildcard formats, just implement the corresponding detection and conversion methods in the interceptor.

DEMO project demonstrates dynamic menu, dynamic routing, button permissions, request blocking.

Mock data is generated by RAP2 at the back end of the demo project. The login request should normally be in POST mode. However, because rap2 programming mode cannot obtain non-GET request parameters, only GET can be used for login.

In addition, the interface that obtains permission after login does not need to carry additional parameters. The backend can implement user authentication based on the token information carried in the request header. However, because rap2 programming mode cannot obtain headers data, only one Authorization parameter can be added to generate simulated data.

vue-access-control.refined-x.com

Front-end road original technical article, reproduced please indicate the source: refined-x.com/2017/11/28/…

If you have any questions about the content of this article, please leave a comment or scan the qr code below to join the “Front-end road – Knowledge Planet” paid questions.