How should Vue do permission management? How to control the permissions to the button level?

analyze

Comprehensive practice questions, in actual development, often need to face the needs of authority management, and examine the actual application ability.

There are two general requirements for authority management: page authority and button authority, which can be discussed from these two aspects.

train of thought

1. Permission management requirements analysis: page and button permissions

2. Implementation scheme of rights management: divided into back-end scheme and front-end scheme

3. Their respective advantages and disadvantages

practice

1. The general requirement of authority management is the management of page authority and button authority

2. There are two solutions: backend and frontend for specific implementation: 

The front-end solution will configure all routing information on the front-end , and require users to log in through the routing guard. After the user logs in, the routing table will be filtered out according to the role . For example, I will configure an asyncRoutes array , add a roles field in the meta of the route for the page that needs authentication, and take the intersection of the two after obtaining the user role. If the result is not empty, it means that it can be accessed. After the filtering process is over, the remaining routes are the pages that the user can access. Finally, routes can be dynamically added through router.addRoutes(accessRoutes) .

The back-end solution will store all page routing information in the database. When the user logs in, he will query all the page routing information he can access according to his role and return it to the front-end. The front-end will then dynamically add routing information through addRoutes

The control of button permissions usually implements a command , such as v-permission, and the role required by the button is passed to the v-permission command by value. In the moutned hook of the command, it can be judged whether the current user role and the button overlap , and if there is, the button is reserved. None to remove the button.

 3. The advantage of the pure front-end solution is that it is simple to implement and does not require additional permission management pages, but it is relatively problematic to maintain. If there are new page and role requirements, the front-end code must be modified and repackaged for deployment; the server-side solution does not have this problem. Through the special role and authority management page, configure the page and button authority information to the database, and the application will get the latest routing information every time it logs in, which can be said to be once and for all!

How to add the routing information returned by the server to the router?

// 前端组件名和组件映射表
const map = {
  //xx: require('@/views/xx.vue').default // 同步的⽅式
  xx: () => import('@/views/xx.vue') // 异步的⽅式
}
// 服务端返回的asyncRoutes
const asyncRoutes = [
  { path: '/xx', component: 'xx',... }
]
// 遍历asyncRoutes，将component替换为map[component]
function mapComponent(asyncRoutes) {
  asyncRoutes.forEach(route => {
    route.component = map[route.component];
    if(route.children) {
      route.children.map(child => mapComponent(child))
    }
 })
}
mapComponent(asyncRoutes)