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

BingqiChen 發(fā)布于2019-08-22 11:06 / 1692人閱讀

摘要：項(xiàng)目背景物業(yè)管理后臺，不同角色擁有不同權(quán)限采用技術(shù)實(shí)現(xiàn)權(quán)限管理需要后端接口支持，這里僅提供前端解決方案。前端代碼可參考如果有更好的想法和建議，歡迎評論。

項(xiàng)目背景：物業(yè)管理后臺，不同角色擁有不同權(quán)限

采用技術(shù)：Vue.js + Vuex + Element UI

實(shí)現(xiàn) RBAC 權(quán)限管理需要后端接口支持，這里僅提供前端解決方案。
因代碼篇幅較大，對代碼進(jìn)行了刪減，文中 “...” 即為省略的一部分代碼。

大致思路：

首先登錄成功后，從后臺拉取用戶當(dāng)前可顯示的菜單和可用權(quán)限列表，分別將其存入 store 的 nav（菜單導(dǎo)航）和 auth（用戶可用權(quán)限）中，
在用戶切換路由時(shí)，判斷是否存在 auth ，如果不存在，則重新獲取，判斷當(dāng)前訪問地址 to.meta.alias 是否在
用戶可用權(quán)限列表中，如果不存在，則提示無權(quán)限，否則進(jìn)入路由。

1. 路由與側(cè)邊菜單分離 側(cè)邊菜單相關(guān)代碼 Main.vue

2. 路由切換前進(jìn)行鑒權(quán)

路由定義的部分代碼，對每個(gè)路由添加了 meta 屬性，用于鑒權(quán)。
這里 component 采用了異步引入的方式。

定義路由

// ...
// 系統(tǒng)管理
{
path: "/system",
component: Main,
name: "系統(tǒng)管理",
redirect: "/system/organization",
children: [{
  path: "/system/organization",
  component: () => import ("@/views/System/Organization.vue"),
  name: "組織結(jié)構(gòu)",
  // requiresAuth 用于確認(rèn)此地址是否需要驗(yàn)證
  // alias 用于獲取后端返回rbac權(quán)限對應(yīng)的前端路由地址和導(dǎo)航菜單圖標(biāo)
  meta: {requiresAuth: true, alias: "Pmsadmin/Oragnize/list"}
},
  {
    path: "/system/user",
    component: () => import ("@/views/System/User.vue"),
    name: "人員管理",
    redirect: "/system/user/index",
    children: [
    {
      path: "/system/user/index",
      component: () => import ("@/views/System/UserList.vue"),
      name: "職員列表",
      meta: {requiresAuth: true, alias: "Pmsadmin/Admin/list"}
    }
    ]
  },
  {
    path: "/system/auth",
    component: () => import ("@/views/System/Auth.vue"),
    name: "角色管理",
    meta: {requiresAuth: true, alias: "Pmsadmin/Role/list"}
  }
]
}
// ...

路由鉤子 beforeEach

router.beforeEach((to, from, next) => {
  document.title = `${configs.title} - ${to.name}`;
  const {hasAuth, auth} = store.state.user;
  // 未拿到權(quán)限，則獲取
  if (!hasAuth) {
    store.dispatch("getUserAuth");
    console.log("重新獲取用戶權(quán)限");
    // next();
  }
  // 如果未登錄，跳轉(zhuǎn)
  if (window.localStorage.getItem("IS_LOGIN") === null && to.path !== "/login") {
    console.log("未登錄狀態(tài)");
    next({
      path: "/login",
      query: {redirect: to.fullPath}
      // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
    })
  } else {
    // 需要鑒權(quán)的路由地址
    console.log(to, auth.indexOf(to.meta.alias), auth);
    if (to.meta.requiresAuth) {
      if (auth.indexOf(to.meta.alias) > -1) {
        console.log("有權(quán)限進(jìn)入");
        next();
      } else {
        if(auth.length > 0) {
          Message.error({
            message: "當(dāng)前用戶權(quán)限不足，無法訪問",
            showClose: true,
          });
        } else {
          next();
        }
      }
    } else {
      next();
    }
  }
});

在 Vuex 的 state 中，定義好 nav 對象

// 登錄用戶信息
const user = {
  name: "", // 用戶名
  avatar: "", // 用戶頭像
  auth: [], // 用戶權(quán)限
  hasAuth: false // 是否已經(jīng)加載用戶權(quán)限
};
// 導(dǎo)航菜單
const nav = [];

通過 action 異步獲取數(shù)據(jù)

// 獲取用戶權(quán)限
const getUserAuth = async ({commit}) => {
  const res = await http.post("YOUR_URL", {});
  if (res === null) return;
  console.log("getUserAuth", res.param);
  commit("SET_USER_AUTH", res.param.auth);
  commit("SET_SIDE_NAV", res.param.nav);
};

Vuex 中的 mutation 的相關(guān)代碼

// 設(shè)置用戶權(quán)限
const SET_USER_AUTH = (state, auth) => {
  state.user.auth = auth.concat("歡迎使用");
  state.user.hasAuth = true;
};
// 設(shè)置導(dǎo)航菜單
const SET_SIDE_NAV = (state, nav) => {
  // 導(dǎo)航菜單
  let _nav = [{
    name: "歡迎使用",
    url: "/main",
    iconCls: "fa fa-bookmark"
  }];
  // 權(quán)限菜單對應(yīng)的路由地址
  const route = {
    "系統(tǒng)管理": {iconCls: "fa fa-archive", url: ""},
    "Pmsadmin/Oragnize/list": {iconCls: "", url: "/system/organization"},
    "Pmsadmin/Admin/list": {iconCls: "", url: "/system/user/index"},
    "Pmsadmin/Role/list": {iconCls: "", url: "/system/auth"},
    "Pmsadmin/Log/record": {iconCls: "", url: "/system/logs"},
    "項(xiàng)目管理": {iconCls: "fa fa-unlock-alt", url: ""},
    "Pmsadmin/Project/list": {iconCls: "", url: "/project/list/index"},
    "Pmsadmin/House/list": {iconCls: "", url: "/project/house"},
    "Pmsadmin/Pack/list": {iconCls: "", url: "/project/pack"},
    "廣告位": {iconCls: "fa fa-edit", url: ""},
    "Pmsadmin/Place/list": {iconCls: "", url: "/adsplace/list"},
    "投訴建議": {iconCls: "fa fa-tasks", url: ""},
    "Pmsadmin/Scategory/list": {iconCls: "", url: "/complain/type"},
    "Pmsadmin/Complain/list": {iconCls: "", url: "/complain/list"},
    "Pmsadmin/Suggest/list": {iconCls: "", url: "/complain/suggestion"},
    "報(bào)事報(bào)修": {iconCls: "fa fa-user", url: ""},
    "Pmsadmin/Rcategory/list": {iconCls: "", url: "/rcategory/type"},
    "Pmsadmin/Rcategory/info": {iconCls: "", url: "/rcategory/public"},
    "Pmsadmin/Repair/list": {iconCls: "", url: "/rcategory/personal"},
    "便民服務(wù)": {iconCls: "fa fa-external-link", url: ""},
    "Pmsadmin/Bcategory/list": {iconCls: "", url: "/bcategory/type"},
    "Pmsadmin/Service/list": {iconCls: "", url: "/bcategory/list"},
    "首座推薦": {iconCls: "fa fa-file-text", url: ""},
    "Pmsadmin/stcategory/list": {iconCls: "", url: "/stcategory/type"},
    "Pmsadmin/Store/list": {iconCls: "", url: "/stcategory/list"},
    "招商租賃": {iconCls: "fa fa-leaf", url: ""},
    "Pmsadmin/Bussiness/list": {iconCls: "", url: "/bussiness/list"},
    "Pmsadmin/Company/list": {iconCls: "", url: "/bussiness/company"},
    "Pmsadmin/Question/list": {iconCls: "", url: "/bussiness/question"},
    "停車找車": {iconCls: "fa fa-ra", url: ""},
    "Pmsadmin/Cplace/list": {iconCls: "", url: "/cplace/cmanage"},
    "Pmsadmin/Clist/list": {iconCls: "", url: "/cplace/clist"},
    "Pmsadmin/Cquestion/list": {iconCls: "", url: "/cplace/cquestion"},
  };
  for (let key in nav) {
    let item = nav[key];
    let _temp = {};
    let subItems = []; // 二級菜單臨時(shí)數(shù)組
    if (item.children && item.children.length > 0) {
      // 二級菜單
      item.children.forEach(subItem => {
        subItems.push(Object.assign({}, {
          name: subItem.name || "",
          url: route[subItem.url].url || "",
          iconCls: route[subItem.url].iconCls || "",
        }))
      });
      // 一級菜單
      _temp = Object.assign({}, {
        name: item.name || "",
        url: item.url || "",
        iconCls: route[item.name].iconCls || "",
        children: subItems.slice(0)
      });
      _nav.push(_temp);
    }
  }
  state.nav = _nav;
};

3. 后端接口返回內(nèi)容

{
    "status": 200,
    "info": "數(shù)據(jù)查詢成功！",
    "param": {
        "nav": {
            "1": {
                "name": "系統(tǒng)管理",
                "url": "",
                "children": [
                    {
                        "name": "組織結(jié)構(gòu)",
                        "url": "Pmsadmin/Oragnize/list"
                    },
                    {
                        "name": "人員管理",
                        "url": "Pmsadmin/Admin/list"
                    },
                    {
                        "name": "角色管理",
                        "url": "Pmsadmin/Role/list"
                    },
                    {
                        "name": "日志管理",
                        "url": "Pmsadmin/Log/record"
                    }
                ]
            },
            "61": {
                "name": "廣告位",
                "url": "",
                "children": [
                    {
                        "name": "廣告位列表",
                        "url": "Pmsadmin/Place/list"
                    }
                ]
            }
        },
        "auth": [
            "系統(tǒng)管理",
            "Pmsadmin/Oragnize/list",
            "Pmsadmin/Admin/list",
            "Pmsadmin/Role/list",
            "Pmsadmin/Log/record",
            "廣告位",
            "Pmsadmin/Place/list"
        ]
    }
}

存在的問題

新增修改刪除按鈕還無法實(shí)現(xiàn)根據(jù)用戶權(quán)限控制其顯示

代碼上還存在著不足，期待大神能夠有更優(yōu)的解決方案。

前端代碼

可參考：https://github.com/kfw001/adm...

如果有更好的想法和建議，歡迎評論。

云服務(wù)器 GPU云服務(wù)器前后端分離前后端分離開發(fā) js前后端分離框架前后端不分離 jsp

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

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

發(fā)表評論

登陸后可評論

0條評論

BingqiChen

男|高級講師

我要關(guān)注我要私信

TA的文章

jsp代碼實(shí)例第97課

閱讀 744·2021-11-23 09:51
RAKsmart：全場VPS主機(jī)5折,香港/日本/圣何塞VPS月付2.63美元起

閱讀 2445·2021-10-11 11:10
splunk安裝介紹

閱讀 1316·2021-09-23 11:21
MSP430單片機(jī)，OLED，獨(dú)立按鍵，DS18B20溫度傳感器，繼電器，抽風(fēng)機(jī)，LED燈構(gòu)成的電子

閱讀 1099·2021-09-10 10:50
純css實(shí)現(xiàn)漂亮又健壯的tooltip

閱讀 897·2019-08-30 15:54
【零基礎(chǔ)入門】css學(xué)習(xí)筆記（6）清除浮動

閱讀 3337·2019-08-30 15:53
flex布局demo

閱讀 3296·2019-08-30 15:53
輸入U(xiǎn)RL到瀏覽器顯示頁面的過程，搜集各方面資料總結(jié)一下

閱讀 3196·2019-08-29 17:23

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

權(quán)限設(shè)計(jì)的雜談

RBAC筆記

發(fā)表評論

0條評論

BingqiChen

男|高級講師

TA的文章

jsp代碼實(shí)例第97課

RAKsmart：全場VPS主機(jī)5折,香港/日本/圣何塞VPS月付2.63美元起

splunk安裝介紹

MSP430單片機(jī)，OLED，獨(dú)立按鍵，DS18B20溫度傳感器，繼電器，抽風(fēng)機(jī)，LED燈構(gòu)成的電子

純css實(shí)現(xiàn)漂亮又健壯的tooltip

【零基礎(chǔ)入門】css學(xué)習(xí)筆記（6）清除浮動

flex布局demo

輸入U(xiǎn)RL到瀏覽器顯示頁面的過程，搜集各方面資料總結(jié)一下

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！