[Vue] Vue background permission design, brief analysis of RBAC permission management model

Permission management is divided into two parts: the first part is for different users. They see different navigation links and can access different pages. The second part is for different roles, which have different permission points. Maybe they can access this page, but they may not be able to use the addition, deletion and modification functions of this page.

1. User permissions are constructed based on the RBAC model. Permission points are assigned to roles and roles are assigned to users.

2. How to restrict user access?

One is to verify whether the user is logged in through the token;

The second is to restrict user access rights by dynamically adding routing rules.

3. How to implement dynamic routing rule table?

1. First, the routing rule table is divided into static routes without any restrictions (such as 404, login page, home page) and dynamic routes. Static routes are written in the rule table from the beginning, and dynamic routes are dynamically configured through router.addRoute() Additional.

2. Then the front end obtains the dynamic routing data that the user can access from the back end, and compares it with all dynamic routes to get the dynamic routes that the user can access.

3. Finally, addRoute() is used to merge dynamic routing and static routing. In this way, the user's access rights can be controlled. The user cannot access the page even if he enters the correct address on the address bar (because of the routing rule table The corresponding path and page cannot be matched).

4. In the above steps, we only added but not deleted the routing table, so we need to add two functions in the user logout function module: one is to delete the previous user's accessible routing table saved in Vuex, and the other is to re- Set the routing instance object so that it matches the routing table again.

//通过新建一个全新的Router实例，然后将新的 newRouter.matcher 赋给当前页面的管理 Router，以达到重置路由配置的目的
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const createRouter = () => new Router({
     mode: 'history',
     routes: []
})
const router = createRouter()
export function resetRouter () {
     const newRouter = createRouter()
     router.matcher = newRouter.matcher
}

export default router

5. From now on, the permission management function for users to access the routing page has been completed. However, being able to access this page does not mean that all functions of this page can be used, so the module to implement the permission function point will be started next.

The idea is: assign a unique identifier, such as id, to each permission point, and register the globally available method checkPoint(key) through mixin or custom instructions. This method needs to pass in an identifier. If the user information returned by the server is Containing this identifier means that you have this permission and returns true; if it does not, it means that you do not have this permission and returns false. The return value is used to determine whether the button is available/visible.

For example: the administrator role has employee management access permission (employeeManage). There are two function points under this permission: adding employees and deleting employees. Their identifiers are add and del respectively. User Zhang San logs in to the system, and Zhang San is saved in Vuex. Permission information: You can access the employee management page and add employees. The page component passes the data to checkPoint, and Zhang San can use this function if the result is true.

6. Precautions:

1.userRoutes is a collection of all dynamic routes that users can access. Dynamic routes are added through the addRoutes method.

// 之所以要在最后添加404路由规则，是为了保证404页面一定在规则表中的最后一个位置
router.addRoutes([...userRoutes, { path: '*', redirect: '/404', hidden: true}])

2. After using the router.addRoutes method, you must use next (path) to jump. Next() cannot be used. This is a flaw of VueRouter. next(to.path)