Requirements:
Existing a background management system, involving the user authority menu problem, that is, different users login, according to the different permissions of the display of different menus.
Answer:
Implementation approach
The first method: dynamically add routes, integrate the complete routes together, and extract menus from the routing table; 1. Mount static pages that do not require permissions to the new Router instance and export them. 2. After the user logs in, it obtains the user’s permission information and adjusts the back-end interface to obtain the routing table based on the user’s role or a certain IDENTITY. Router. AddRoutes (store.getters. AddRouters) {router. AddRoutes (store.getters. to, Replace :true}) // hack method to make sure addRoutes are complete,setthe replace:trueso the navigation will not leave ahistoryRecord}) 4. Save all routing tables in the root tag (also save routing tables in vuEX, render menus according to routing tables in VUEX)
The second method is to separate the route from the menu. The front end controls the route completely and the menu is retrieved from the back end. 1. The front end controls the complete routing of the whole system and adds or subtracts the routing table by itself. 2. Adjust the back-end interface according to user permissions to obtain the accessible menu list, and reorganize it according to data rules. Bind the obtained menu data list Array to the menu SideBar and render the SideBar component.
It is worth noting that these page-level permission controls, although already done in the front end, are not enough to do only in the front end, the back end also needs to do interface level permission control.