Flow chart of login && Permissions

preface

First of all, the permission control is divided into three parts, which are more detailed according to the granularity:

  • Login Permission Control
  • Page permission control
    • Whether the page in the menu can be accessed
    • Whether the permission control for buttons (add, Delete, change, search) on the page is displayed
  • Interface permission control

1. Login permission control

Login access permission control is used to verify users. After the user logs in successfully, the backend returns a token, which the front-end carries with it every time it makes an interface request. After getting the token, the backend judges that if the token does exist and has not expired, it can be accessed. If the token does not exist or has expired, the login page is displayed, asking the user to log in to obtain the token again.

Practice a

After the successful login callback, the token returned by the background is directly stored in localStorage, and then the token is removed and sent to the background in the form of synchronizing the default parameters of the request. The code is as follows:

Let axiosOptions = {method, URL, data, timeout, // 'arrayBuffer ', 'blob', 'document', 'json', 'text', 'stream'. Default json responseType, / / request additional headers authToken attribute in the head: {authtToken: window. LocalStorage. The getItem (` base/token? ')}} copies the codeCopy the code

Approach 2

Used in the current project axios. Interceptors. Request. Use set before sending a request to intercept, directly to the token into the req. Headers. AuthToken, as global incoming. The code is as follows:

/ / axios. Interceptors. Request. Use request intercept: configuration request information / / axios. Interceptors. Response. Use the response to intercept: Configuration request return information axios. Interceptors. Request. Use (the req = > {the req. Headers. AuthToken = window. LocalStorage. The getItem (` base/token? `) Return req}, error => {return promise.reject (error)}) copies the codeCopy the code

The knowledge points involved in login

  • Vuex +localStorage: local vuex+localStorage stores a token persistently. (Token: a Key created by the server to uniquely identify a user).
  • Axios: request interceptor authentication token, can use axios API: axios. Interceptors. Request. The use, can also by adding the default parameters in the form of additional token in the request header.

Second, page permission control

As mentioned above, there are two types of page permission control:

  • Whether the page in the menu can be accessed
  • Whether the permission control for buttons (add, Delete, change, search) on the page is displayed

First look at the page access permissions of the menu

The realization of page access can be divided into the following two schemes:

  • Solution 1: Mount all routes during initialization, and verify each route before jumping
  • In scheme 2, only the routes owned by the current user are mounted. If the user forcibly accesses the route through the URL, the route will enter 404 directly, which is equivalent to control from the source

The disadvantages of the former are obvious. It is a waste of computing resources to check each route hop. In addition, routes that users have no access to should not be mounted in theory. The latter solves the above problem, but mounting routes on demand requires knowing the routing permissions of the user, that is, knowing what routing permissions the current user has when the user logs in. So it must be plan 2 that is more in line with good user experience.

Menu permission control in the project

  • 1. Meta attributes related to permissions

    • NoRequireAuth: true Mount directly without permission
    • ManageFree: true Is not displayed in the operation permission tree

  • Router. BeforeEach () Intercepts the hook of the route

    • Routes that do not require permission are allowed. NoRequireAuth and manageFree within meta are not controlled by permissions
    • Before entering the route, obtain the menu to be displayed from the backend. The backend determines the current user permission based on the token and returns to the corresponding menu. A front-end recursive comparison determines the final menu list to display

  • 3.router.addRoutes()

    • Add all routes that match permissions dynamically through router.addroutes ()

Push-button level permission control (Vue instruction V-permission)

  • 1. Each module should have four permissions: Query (GET), add (POST), update (PUT) and delete (delete).
  • 2. Use decimal and binary to represent the permissions of the current module. 1111(15), the relationship between the transformed binary and the permission is expressed as follows: from right to left (1 indicates that the permission is owned, 0 indicates that the permission is not owned), the first digit represents query, the second digit represents add, the third digit represents update, and the fourth digit represents delete. For example, eg: binary 1111(15), on behalf of the query, add, update, delete four permissions.
    1. If the corresponding module does not have this permission, remove the current button DOM element.

Example:

< el - button @ click = "handleClick" v - permission: moduleName. Post > new < / el - button > < el - button @ click = "handleClick" Delete ="moduleName"> Remove the </el-button> copy codeCopy the code

3. Control of interface access rights

Finally, with request control as the last line of defense, the route may be misconfigured, and the button may forget to add permissions. In this case, request control can be used as a backstop, and the unauthorized request will be blocked at the front end.

  • The interfaces on the front and back end are RESTful and have four permissions, including query (GET), add (POST), update (PUT), and delete (Delete). For query operations, normally, if there is only one parameter, a GET request should be used. If there are multiple parameters, a POST request should be used. However, /query should be added after the URL to tell the server that the current query operation is performed, which is distinguished from the normal add (POST) request. Similarly, if the user is deleted with multiple parameters, the DELETE request is changed to a POST request, and/DELETE is added to distinguish it from the normal DELETE operation.

    El-button front-end learning training, video tutorials, learning routes, add weixin Kaixin666Haoyun