位運算--vue權限路由的另一種思路

BlackMass 發布于2019-08-26 18:36 / 1385人閱讀

摘要：權限路由的實現方案后端表結構在項目中需要進行權限控制的路由可能是動態變化的。在中，按位操作符將其操作數當作位的比特序列由和組成。表的與比特序號進行關聯。

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位運算

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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