成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

BlackMass / 1387人閱讀

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

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

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

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

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

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

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

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

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

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

0x02

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

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

// 假設(shè)當(dāng)前用戶(hù)擁有的角色在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)]

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

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

這里簡(jiǎn)單描述一下vue-element-admin實(shí)現(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
}, []))

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

0x04

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

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

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

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

0x05

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

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

鏈接：

有贊?rùn)?quán)限系統(tǒng)

vue-element-admin

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110279.html

相關(guān)文章

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

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

    shiweifu 評(píng)論0 收藏0

  • 處理 Vue 單頁(yè)面 SEO 的另一種思路

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

    yangrd 評(píng)論0 收藏0

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

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

    lastSeries 評(píng)論0 收藏0

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

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

    BingqiChen 評(píng)論0 收藏0

  • 面試官常問(wèn)——vue篇

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

    BlackMass 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<