位运算--vue权限路由的另一种思路

BlackMass 发布于2019-08-26 18:36 / 1324人阅读

摘要：权限路由的实现方案后端表结构在项目中需要进行权限控制的路由可能是动态变化的。在中，按位操作符将其操作数当作位的比特序列由和组成。表的与比特序号进行关联。

RBAC0(基于角色的访问控制)

Role-Based Access Control：使用角色描述用户和权限（operation+resource）之间的关系，用户和权限之间无需直接关联

RBAC 基本模型如图所示（图片来自有赞权限系统）：

本质上，角色就是一组权限的集合。

VUE权限路由的实现方案 0x01

后端表结构：

在项目中需要进行权限控制的路由可能是动态变化的。也许领导说某个页面现在不需要权限控制，然后过两天又需要了。。。
所以在后端维护一张route表，每个路由对应一条记录，id自增，记录路由的url，是否启用等。这样所有需要权限控制的路由都分配了一个唯一id。

上面说到角色的本质是一组权限的集合，那么可以用int型的二进制位来表示这个集合，0表示没有权限，1表示有权限。
在JavaScript中，按位操作符（Bitwise operators）将其操作数（operands）当作32位的比特序列（由0和1组成）。rout表的id与比特序号进行关联。例如50的二进制表示为110010，那么表示有id为2,5,6的路由的访问权限。routes表的里id值表示控制这条路由权限在二进制位中的序号。

role_route表中的permissions和offset字段描述了一个角色所拥有的权限，表示为{(offset1,permissions1),(offset2,permissions2)…(offsetN,permissionsN)}。即用permissions和offset字段关联routes表的id。例如某个角色在role_route表中有两条记录offset为0，permissions为1和offset为1，permissions为2，那么这个角色完整的二进制集合为10（省略30个0）1，在routes表中所关联的路由id为1和33，即这个角色拥有路由id为1和33的权限。

0x02

在前端判断一个路由是否有权限：

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)]

给某个角色增加一个权限：

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

0x03

这里简单描述一下vue-element-admin实现权限路由的思路。

/**
 * 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
}, []))

这里可以看到某个路由的访问权限是写在路由定义里的，对于自定义角色和角色较多的情况不太好处理。上面我们使用角色来存储路由的访问权限，实现将路由的定义和权限控制分开。

0x04

使用二进制序列来存储路由权限，对于多角色和自定义角色有很好的支持。

对于用户自定义角色的情况，我们只需要将需要管理的路由id设置到对应的二进制位即可，不影响路由的定义，且可以无限创建角色。

对于多角色的情况，只要将用户的所有角色做|操作即可，例如 角色1|角色1|···角色N。

在角色数量和路由数量大的情况下，使用二进制位方式管理权限应该是不错的选择。

0x05

这里并没有对路由和菜单是否分离，路由是否由后端返回以及是否使用全局路由守卫等问题进行讨论，使用二进制位存储权限可以与这几种方式相结合，具体选择看业务和个人喜好。

对于路由和菜单的管理可以看看这篇文章的总结：vue权限路由实现方式总结

链接：

有赞权限系统

vue-element-admin

GPU云服务器云服务器位运算位运算详解按位运算 bit位运算

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110279.html

处理 Vue 单页面 SEO 的另一种思路

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prer...

shiweifu 2019-08-01 17:35 评论0 收藏0
处理 Vue 单页面 SEO 的另一种思路

摘要：官方地址设置单页面信息，如果需要单页面，可以和形成更优的配合单页面应用在前端正大放光彩。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免的要去处理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prer...

yangrd 2019-08-21 16:21 评论0 收藏0
Vue 页面权限控制和登陆验证

摘要：如果一个页面，有角色越权访问，这时就得做出限制了。我们可以通过或来实现，下面用代码来展示一下如何用控制登陆验证。更多文章页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。 Vue 动态添加路由及生成菜单这是我写过的一篇文章，通过动态添加路由和菜单来做控制，...

lastSeries 2019-08-23 18:13 评论0 收藏0
利用 Vue.js 实现前后端分离的RBAC角色权限管理

摘要：项目背景物业管理后台，不同角色拥有不同权限采用技术实现权限管理需要后端接口支持，这里仅提供前端解决方案。前端代码可参考如果有更好的想法和建议，欢迎评论。项目背景：物业管理后台，不同角色拥有不同权限采用技术：Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持，这里仅提供前端解决方案。因代码篇幅较大，对代码进行了删减，文中 ... 即为省略的...

BingqiChen 2019-08-22 11:06 评论0 收藏0
面试官常问——vue篇

摘要：如果要相应状态改变，通常最好使用计算属性或取而代之。那解决问题的思路便是在改变的情况下，保证页面的不刷新。后面值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。 1.vue生命周期2.vue 双向绑定原理3.vue router原理4.vue router动态路由 1.vue 生命周期钩子 showImg(https://segmentfault.com/...

BlackMass 2019-08-30 15:55 评论0 收藏0