Flow chart of login && permission

preface

Firstly, we determine the permission control is divided into three parts, among which the granularity is more finely divided:

  • Login Permission Control
  • Page Permission Control
    • Whether the page in the menu is accessible
    • The permissions of buttons in the page (add, Delete, change, search) are controlled
  • Interface Permission Control

1. Login permission control

Login access control is the verification of users. After the user successfully logs in, the background will return a token, and the front end will carry this token every time it makes an interface request. After receiving the token, the background determines that if the token exists and is not expired, it can be accessed. If the token does not exist or the background determines that the token has expired, the system switches to the login page and asks the user to log in again to obtain the token.

Practice a

In the callback of successful login, the token returned by the background is directly stored to the localStorage, and then the token is taken out and sent to the background in the form of the default parameter of the request. The code is as follows:

   let axiosOptions = {
     method,
     url,
     data,
     timeout,
     / / 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'. default json
     responseType,
     // Append the authToken attribute to the request header
     headers: {
       authtToken: window.localStorage.getItem(`base/token? `)}}Copy 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 to send the requested information
/ / axios. Interceptors. Response. Use response to intercept: configuration request return information

axios.interceptors.request.use(req= > {
  req.headers.authToken = window.localStorage.getItem(`base/token? `)
  return req
}, error => {
  return Promise.reject(error)
})
Copy the code

The knowledge points involved in the login

  • Vuex +localStorage: The local device stores tokens persistently through vuex+localStorage. A token is a Key created on 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, page permission control is divided into two types:

  • Whether the page in the menu is accessible
  • The permissions of buttons in the page (add, Delete, change, search) are controlled

First look at the menu page access rights

Page access permissions can be implemented in the following two schemes:

  • Solution 1. Initialization Means that all routes are mounted and verification is performed before each route jump
  • Solution 2. Only the routes owned by the current user are mounted. If the user uses the URL to force access, the user accesses 404 directly, which is equivalent to source control

The disadvantages of the former are obvious. It is a waste of computing resources to check every route jump, and routes that users have no access to should theoretically not be mounted. The latter solves the above problem, but mounting routes on demand requires knowing the user’s routing permissions, which means knowing which routing permissions the current user has when the user logs in. Therefore, it must be that solution two is more consistent with good user experience.

Menu permission control in the project

  • 1. Meta attributes involved in the permission

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

  • 2. Router.beforeeach () Hooks that intercept routes

    • Routes that do not require permission are allowed directly. NoRequireAuth and manageFree in meta are not controlled by permissions
    • Before entering the route, obtain the menu to be displayed from the back end. The backend determines the permission of the current user based on the token and returns to the corresponding menu. The front end recursively compares to determine the final list of menus to display

  • 3.router.addRoutes()

    • Router-addroutes () is used to dynamically add all routes that match the permission

Button level permission control (Vue instruction V-Permission)

  • 1. Each module should have four permissions, query (get), add (POST), update (PUT), delete (Delete)
  • 2. The permissions of the current module are expressed in decimal and binary. 1111(15), the relationship between binary and permission after conversion is expressed as follows: from right to left (1 represents owning the permission, 0 represents not owning it), the first digit represents querying, the second digit represents adding, the third digit represents updating, and the fourth digit represents deleting. For example, EG: binary 1111(15), representing for query, add, update, delete four kinds of 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" V - permission. Delete = "moduleName" > delete < / el - button >Copy the code

Iii. Interface access control

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

  • The interfaces are RESTful in style and have four permissions: query (GET), add (POST), update (PUT), and Delete (DELETE). If there are more than one parameter, the request should be changed to a POST request. However, you need to add /query after the URL to tell the server that the query is being performed. This is used to distinguish the query request from the normal add (POST) request. Similarly, when deleting a user with multiple parameters, the DELETE request is changed to a POST request, and/DELETE is added to distinguish it from a normal DELETE operation.
Refer to the link
  • Segmentfault.com/a/119000000… “Hand touch hand, take you with Vue backstage Series 2 (Login Permission)”
  • Mp.weixin.qq.com/s/b-D2eH1mL… How to Use Vue to Achieve front-end Permission Control