Application of bit operation in vue permission routing

Application of bit operation in vue permission routing

RBAC0 (role-based access control)

Role-Based Access Control: Use roles to describe the relationship between users and permissions (operation+resource), and there is no need for direct association between users and permissions

The basic model of RBAC is shown in the figure (the picture comes from the permission system with praise ):

Essentially, a role is a collection of a set of permissions.

Implementation scheme of VUE authority routing


Back-end table structure:

The routes that need to be controlled in the project may change dynamically. Maybe the leader said that a certain page does not need permission control now, and then it will be needed again after two days. . . Therefore, a route table is maintained in the backend, each route corresponds to a record, the id is incremented, the url of the record is recorded, whether it is enabled, etc. In this way, all routes that require permission control are assigned a unique id.

As mentioned above, the essence of a role is a set of permissions. Then you can use int-type binary bits to represent this set. 0 means no permission, and 1 means permission. In JavaScript, bitwise operators treat their operands as a 32-bit sequence of bits (consisting of 0 and 1). The id of the rout table is associated with the bit sequence number. For example, the binary representation of 50 is 110010, then it means that there are access rights for routes with id 2,5,6. The id value in the routes table represents the serial number in the binary bit that controls this routing authority.

The permissions and offset fields in the role_route table describe the permissions a role has, expressed as {(offset1,permissions1),(offset2,permissions2)...(offsetN,permissionsN)}. That is, the id of the routes table is associated with the permissions and offset fields. For example, if a role has two records in the role_route table, the offset is 0, permissions is 1 and offset is 1, and permissions are 2, then the complete binary set of this role is 10 30 0 1, and the associated route ids in the routes table are 1 and 33 , That is, this role has the permissions of routing IDs 1 and 33.


Determine whether a route has permission on the front end:

const permissionUtils = {
  getSingleRoutePermission (id) {
    return 1 << (id % 31)
  getOffset (id) {
    return Math.floor(id/31)

// role_route  offset 0 permissions 100 offset 1 permissions 50
const permissions = [100, 50] //offset 0,1
permissionUtils.getSingleRoutePermission(routeId) & permissions[permissionUtils.getOffset(routeId)]

Add a permission to a role:

let offset = permissionUtils.getOffset(routeId)
permissions.splice(offset, 1, permissions[offset] |= permissionUtils.getSingleRoutePermission(routeId))


Here is a brief description of the idea of vue-element-admin to implement permission routing.

 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
const asyncRoutes = [
    path: '/permission',
    component: Layout,
    name: 'Permission',
    meta: {
      roles: ['admin', 'editor']
router.addRoutes(asyncRoutes.reduce((permissionRoutes, route) => {
  user.roles.some(role => route.meta.roles.includes(role)) && permissionRoutes.push(route)
  return permissionRoutes
}, []))

Here you can see that the access permission of a certain route is written in the route definition, and it is not easy to deal with situations where there are many custom roles and roles. Above, we use roles to store access permissions for routing, and realize the separation of routing definition and access control.


Use binary sequence to store routing permissions, which has good support for multiple roles and custom roles.

In the case of user-defined roles, we only need to set the route id to be managed to the corresponding binary digits, which does not affect the definition of the route, and can create unlimited roles.

In the case of multiple roles, you only need to perform |operations on all roles of the user , for example 1| 1| N.

When the number of roles and the number of routes are large, it should be a good choice to use binary bits to manage permissions.


There is no discussion here on whether routing and menu are separated, whether routing is returned from the backend, and whether to use global routing guards, etc. The use of binary storage permissions can be combined with these methods, and the specific choice depends on business and personal preferences.

For the management of routing and menus, please see the summary of this article: Summary of vue permission routing implementation


Like permission system