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
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
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
1.2 dynamic routes
Used to achieve page access, dynamic routing through
router.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 the
router.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 as
router.addRoutesEvent document link
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
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 file
resetRouterTo create a new router, and then Router.matcher Call the resetRouter method for the current Router in the logout module.
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 as
v-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
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 directly
v-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?
- 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 API
axios.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 configured
withCredentialsIs true, that is to say
axios.defaults.withCredentials = true, and the server can get your cookie only after withcredentials is turned on
- The interceptor intercepts the result returned by the interface. For example, 401 does not have login permission.
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 ✨