Frontier: Portal, as I understand it, is a Portal that can quickly integrate application portals for unified account management, unified authentication login, breaking information islands, unified permission management, and single sign-on SSO. Early times of MVC web application have permissions to control page actually show and hide, menus, buttons and so on, only in a different way, mostly is given priority to with PHP and JSP, etc, with the front end after the separation, the front also became the shoulder traverse to the child of the access control, mainly from the following a few more to fulfill, the routing layer, view layer and interface layer

1. Routing layer

In general, SPA applications combine VUE-Router and VUEX to achieve a set of routing system. There are two main ways: one is to inject routes through vue-Router addRoutes method to achieve control; the other is to restrict route hops directly through vue-router beforeEach hook

1.1 the router. BeforeEach ()

BeforeEach hook function is executed before route hops and registers the router. BeforeEach hook manages each hop of a route and checks each hop. If the target route does not exist in the basic route and the user route of the current user, the hop is cancelled and the forward error page or login page is displayed

  • Add a meta attribute to the route definition to control whether the page requires login permission

1.2 DynamicRoutes

Router. AddRoutes () is used to mount only the routes that the current user has permission on. If the user accesses the unauthorized routes directly, the 404 page will be displayed. BeforeEach dynamic mounting is handled in router.beforeEach. Let’s see the implementation

  • Define the routes that need to be dynamically mounted. The routes are divided into initial routes and user routes that need to be dynamically mounted based on roles, such as constantRoutes and asyncRoutes

  • Router. beforeEach Add router.addRoutes event documentation link 🔗

To prevent the same route from being configured repeatedly, check whether the role permission exists before adding a route

  • Get the route that has permission,generateRoutesThe implementation of the

The user’s route permission is filtered recursively, and all routes that match the permission are dynamically added through router.addroutes (), depending on the back end of course. For users of different roles, it is the back-end that tells the route list to the front-end registration

👨🎓 Ah Le student: If I log out at this time, and then do not refresh the page, log in another user with different permissions, that is not the route will be repeated?

A: You define the resetRouter method in the routing file, create a new Router, give the new router. matcher to the current Router, and call the resetRouter method in the logout module

Conclusion:

  • beforeEachDo we need to manually help vue-router “identify which pages are accessible and which are not”?
  • addRoutesThe vue-router is told “I only recognize these routes. I don’t care about other routes.”

2. View level

In the last section, I talked about the permission control of routing, mainly in the control menu page permission, then if it is button permission, what should be done? For example, the permission control of buttons (add, delete, change, search) on the page is displayed

2.1 Instruction control

You can combine the custom instruction of Vue to implement a permission instruction such as V-auth to control the permission and determine whether the corresponding module has a certain permission. If not, remove the dom element of the current button. Let’s take a look at this implementation method 👇

Through the custom permission instruction V-auth to achieve button permission control, by passing the permission role array list, to control whether the element is displayed

👨🎓 Ahler: Why not use V-if or V-show to control show and hide, instead of custom commands?

A: Because v-show, dom is not hidden, users can change the display to see, v-if, delete, will leave a note

Consider 🤔 : How can the above example be modified if you want to implement button display but disable?

🌲 Recommended reading:

  • Vue-element-admin Back-end front-end solution
  • Hand to hand, take you to use vUE masturbation background series two (login permission)

3. Interface layer

We use in the project, the request for library to axios is more, we usually use axios API axios. Interceptors. Request. Use rights management is the interceptor to do

  • Request headers add token authentication, or you can use the authorization information in the cookie directly, if configuredwithCredentialsIs true, which is trueaxios.defaults.withCredentials = trueWhen withCredentials are enabled, the server can get your cookies

  • The interceptor intercepts the interface and returns a result, such as 401 having no login permission.

🌲 sauce previous articles:

  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Please drink a cup 🍵 remember three even oh ~

1. Remember to give 🌲 sauce a thumbs up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨