notes:
Core idea:
1. Obtain the user role after login, obtain the user's authority through the role, and inject the route corresponding to the authority.
2. Refresh the page, use the role from localStorage (a better way is through the token) to obtain the authority again, and inject the route again. The routing menu corresponding to the circulation permission at the left end of the management interface .
3. LocalStorage stores user information (token), and authority routing does not.
All routes are divided into 2 types:
- Public route: All users can view it.
- Authority route: the route to which the current user authority belongs.
There are two ways to achieve control:
- Inject routing through the vue-router addRoutes method to achieve control
- Limit routing jumps through vue-router beforeEach hooks
Generally speaking, you need to use the first method, the addRoutes injection method, and the second method is expensive for each judgment, and you cannot get all the routing lists corresponding to the role at one time. This list needs to be rendered on the left immediately after logging in.
There are several types of permission control:
- The permission control of the first-level menu,
- Access control of the secondary menu,
- Button-level permission control.
There are two types of front-end and back-end agreement control methods:
- The backend returns the routing control list
- Front-end and back-end agreement routing control list
Vue permission management - Bug 1 - Blog Park
Realization of Vue dynamic routing (pass routing in background, get and generate sidebar in front end) - JS Tutorial - PHP中文网
https://www.jianshu.com/p/99c7b6fc1442