Front end authority management of portal

Time:2021-1-23

Front end authority management of portal

Frontier: the portal I understand is a portal, which can quickly integrate application portals to unify account management, unified authentication login, break the information island, etc., do unified authority management, and also realize single sign on SSO. In the early MVC era, web applications actually used permissions to control the display and hiding of pages, menus, buttons, etc., but the presentation methods were different. Most of them were PHP and JSP. With the separation of front and back ends, the front end also became the handle of permission control, mainly from the following aspects: routing level, view level and interface level

Front end authority management of portal

1. Routing layer

The general spa application combines Vue router and vuex to implement a set of routing system. There are two main ways: one is to control the route by injecting the Vue router addroutes method, the other is to restrict the route jump directly through the Vue router before each hook

1.1 router.beforeEach()

The beforeeach hook function is executed before the route jump, and it is registered router.beforeEach The hook manages every jump of the route and checks every jump. If the target route no longer exists in the basic route and the user route of the current user, the jump will be cancelled and the jump error page or login page will be changed

  • Add an attribute of meta in route definition to control whether login permission is required for the page

Front end authority management of portal

1.2 dynamic routes

Used to achieve page access, dynamic routing throughrouter.addRoutes(), to mount only the routes that the current user has permission to. If the user directly accesses the unauthorized routes, it will enter the 404 page. But the premise is that the user needs to log in and get the routing permission. Generally, the dynamic mount is in therouter.beforeEachProcessing, let’s see the specific implementation

  • Define the routes that need to be dynamically mounted, which are divided into initial routes and “user routes” that are dynamically mounted according to the role of role, such asconstantRoutesandasyncRoutes
  • router.beforeEachadd to router.addRoutesEvent document link

Front end authority management of portal

In order to prevent the same route from being configured repeatedly, it is necessary to determine whether the role permission already exists before adding a route

  • Get the route with permission,generateRoutesThe realization of

Front end authority management of portal

Through the recursive way to filter the user’s routing authority, through the router.addRoutes () dynamically add all routes that meet the permissions. Of course, this method depends on the back end. For users with different roles, the back-end tells the front-end to register the routing list

Mr. Le: if I log out at this time, and then do not refresh the page and log in again to another user with different permissions, will the routing be repeated?

A: you define it in the routing fileresetRouterTo create a new router, and then Router.matcher Call the resetRouter method for the current Router in the logout module.

Front end authority management of portal

Conclusion:

  • beforeEachIt’s up to us to help Vue router “identify which pages are accessible and which are not.”
  • addRoutesIt tells Vue router “I only recognize these routes, and other route addresses have nothing to do with me” through injection route configuration

2. View level

In the previous section, we talked about the permission control of routing, mainly in the control of menu page permission. If it is button permission, what should we do? For example, whether the permission control of the button (add, delete, change, query) in the page is displayed

2.1 command control

You can use Vue’s custom instructions to implement a permission instruction, such asv-authTo control permissions, to 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 the implementation

Front end authority management of portal

Through the custom permission command v-auth to achieve button permission control, through the incoming permission role array list, to control whether the element is displayed

Mr. Le: why not use it directlyv-ifperhapsv-showTo control display and hide, but to customize commands?

A: for v-show, the DOM is not hidden. Users can change the display to see it. For V-IF, notes will be left after deletion<!-- -->

Thinking: if you want to realize the button display but disable, how should the above example be modified?

Recommended reading:

  • Vue element admin background front end solution
  • Touch your hand, take you to use Vue for backstage Series 2 (login permission)

3. Interface level

In our project use, Axios is the main request library, and we usually use Axios APIaxios.interceptors.request.useIn other words, the interceptor is used for permission management

  • You can add token authentication to the request header, or you can directly use the authorization information in the cookie, provided that it is configuredwithCredentialsIs true, that is to sayaxios.defaults.withCredentials = true, and the server can get your cookie only after withcredentials is turned on

Front end authority management of portal

  • The interceptor intercepts the result returned by the interface. For example, 401 does not have login permission.

Front end authority management of portal

Please have a drink. Remember to have a drink

1. After reading, remember to praise the sauce. Oh, there is motivation

2., pay attention to the interesting things at the front of the official account, and talk with you about the interesting things at the front end.

3. The article is included in GitHub frontentthings. Thank you, star ✨