亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

位運算--vue權(quán)限路由的另一種思路

BlackMass / 1448人閱讀

摘要：權(quán)限路由的實現(xiàn)方案后端表結(jié)構(gòu)在項目中需要進行權(quán)限控制的路由可能是動態(tài)變化的。在中，按位操作符將其操作數(shù)當(dāng)作位的比特序列由和組成。表的與比特序號進行關(guān)聯(lián)。

RBAC0(基于角色的訪問控制)

Role-Based Access Control：使用角色描述用戶和權(quán)限（operation+resource）之間的關(guān)系，用戶和權(quán)限之間無需直接關(guān)聯(lián)

RBAC 基本模型如圖所示（圖片來自有贊權(quán)限系統(tǒng)）：

本質(zhì)上，角色就是一組權(quán)限的集合。

VUE權(quán)限路由的實現(xiàn)方案 0x01

后端表結(jié)構(gòu)：

在項目中需要進行權(quán)限控制的路由可能是動態(tài)變化的。也許領(lǐng)導(dǎo)說某個頁面現(xiàn)在不需要權(quán)限控制，然后過兩天又需要了。。。
所以在后端維護一張route表，每個路由對應(yīng)一條記錄，id自增，記錄路由的url，是否啟用等。這樣所有需要權(quán)限控制的路由都分配了一個唯一id。

上面說到角色的本質(zhì)是一組權(quán)限的集合，那么可以用int型的二進制位來表示這個集合，0表示沒有權(quán)限，1表示有權(quán)限。
在JavaScript中，按位操作符（Bitwise operators）將其操作數(shù)（operands）當(dāng)作32位的比特序列（由0和1組成）。rout表的id與比特序號進行關(guān)聯(lián)。例如50的二進制表示為110010，那么表示有id為2,5,6的路由的訪問權(quán)限。routes表的里id值表示控制這條路由權(quán)限在二進制位中的序號。

role_route表中的permissions和offset字段描述了一個角色所擁有的權(quán)限，表示為{(offset1,permissions1),(offset2,permissions2)…(offsetN,permissionsN)}。即用permissions和offset字段關(guān)聯(lián)routes表的id。例如某個角色在role_route表中有兩條記錄offset為0，permissions為1和offset為1，permissions為2，那么這個角色完整的二進制集合為10（省略30個0）1，在routes表中所關(guān)聯(lián)的路由id為1和33，即這個角色擁有路由id為1和33的權(quán)限。

0x02

在前端判斷一個路由是否有權(quán)限：

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

// 假設(shè)當(dāng)前用戶擁有的角色在role_route表中關(guān)聯(lián)兩條記錄： offset為0，permissions為100和offset為1，permissions為50
const permissions = [100, 50] // offset分別為0,1
permissionUtils.getSingleRoutePermission(routeId) & permissions[permissionUtils.getOffset(routeId)]

給某個角色增加一個權(quán)限：

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

這里簡單描述一下vue-element-admin實現(xiàn)權(quán)限路由的思路。

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

這里可以看到某個路由的訪問權(quán)限是寫在路由定義里的，對于自定義角色和角色較多的情況不太好處理。上面我們使用角色來存儲路由的訪問權(quán)限，實現(xiàn)將路由的定義和權(quán)限控制分開。

0x04

使用二進制序列來存儲路由權(quán)限，對于多角色和自定義角色有很好的支持。

對于用戶自定義角色的情況，我們只需要將需要管理的路由id設(shè)置到對應(yīng)的二進制位即可，不影響路由的定義，且可以無限創(chuàng)建角色。

對于多角色的情況，只要將用戶的所有角色做|操作即可，例如 角色1|角色1|···角色N。

在角色數(shù)量和路由數(shù)量大的情況下，使用二進制位方式管理權(quán)限應(yīng)該是不錯的選擇。

0x05

這里并沒有對路由和菜單是否分離，路由是否由后端返回以及是否使用全局路由守衛(wèi)等問題進行討論，使用二進制位存儲權(quán)限可以與這幾種方式相結(jié)合，具體選擇看業(yè)務(wù)和個人喜好。

對于路由和菜單的管理可以看看這篇文章的總結(jié)：vue權(quán)限路由實現(xiàn)方式總結(jié)

鏈接：

有贊權(quán)限系統(tǒng)

vue-element-admin

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110279.html

相關(guān)文章

  • 處理 Vue 單頁面 SEO 的另一種思路

    摘要：官方地址設(shè)置單頁面信息，如果需要單頁面，可以和形成更優(yōu)的配合單頁面應(yīng)用在前端正大放光彩。隨著單頁面應(yīng)用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發(fā)效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...

    shiweifu 評論0 收藏0

  • 處理 Vue 單頁面 SEO 的另一種思路

    摘要：官方地址設(shè)置單頁面信息，如果需要單頁面，可以和形成更優(yōu)的配合單頁面應(yīng)用在前端正大放光彩。隨著單頁面應(yīng)用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發(fā)效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...

    yangrd 評論0 收藏0

  • Vue 頁面權(quán)限控制和登陸驗證

    摘要：如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。我們可以通過或來實現(xiàn)，下面用代碼來展示一下如何用控制登陸驗證。 更多文章 頁面權(quán)限控制 頁面權(quán)限控制是什么意思呢？ 就是一個網(wǎng)站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權(quán)訪問，這時就得做出限制了。 Vue 動態(tài)添加路由及生成菜單這是我寫過的一篇文章，通過動態(tài)添加路由和菜單來做控制，...

    lastSeries 評論0 收藏0

  • 利用 Vue.js 實現(xiàn)前后端分離的RBAC角色權(quán)限管理

    摘要：項目背景物業(yè)管理后臺，不同角色擁有不同權(quán)限采用技術(shù)實現(xiàn)權(quán)限管理需要后端接口支持，這里僅提供前端解決方案。前端代碼可參考如果有更好的想法和建議，歡迎評論。 項目背景：物業(yè)管理后臺，不同角色擁有不同權(quán)限 采用技術(shù)：Vue.js + Vuex + Element UI 實現(xiàn) RBAC 權(quán)限管理需要后端接口支持，這里僅提供前端解決方案。因代碼篇幅較大，對代碼進行了刪減，文中 ... 即為省略的...

    BingqiChen 評論0 收藏0

  • 面試官常問——vue篇

    摘要：如果要相應(yīng)狀態(tài)改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。 1.vue生命周期2.vue 雙向綁定原理3.vue router原理4.vue router動態(tài)路由 1.vue 生命周期鉤子 showImg(https://segmentfault.com/...

    BlackMass 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<