vue后臺(tái)管理系統(tǒng)權(quán)限控制的示例分析

這篇文章主要介紹vue后臺(tái)管理系統(tǒng)權(quán)限控制的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

權(quán)限控制需求

因?yàn)槭菃雾?yè)面應(yīng)用，路由交給前端來控制，對(duì)于一些需要特定權(quán)限才能查看的信息的保護(hù)變得尤為重要，如果前端不做好權(quán)限校驗(yàn)，后端也一時(shí)疏忽，就可能就會(huì)導(dǎo)致數(shù)據(jù)泄露。

對(duì)于權(quán)限控制，需求大致為如下：

1. 對(duì)于大模塊的限制，比如需要通過路由跳轉(zhuǎn)的模塊，這時(shí)需要進(jìn)行路由攔截

2. 對(duì)于小功能的限制，比如一個(gè)按鈕，如果沒有特定權(quán)限，那么這個(gè)按鈕就不顯示

安全層面的思考

之前接手了一個(gè)管理系統(tǒng)，前端是將權(quán)限列表存儲(chǔ)在storage中來實(shí)現(xiàn)長(zhǎng)久儲(chǔ)存，這種實(shí)現(xiàn)方式是很不可取的，因?yàn)閔acker可以通過手動(dòng)更改存儲(chǔ)的信息來實(shí)現(xiàn)獲取特定權(quán)限，甚至系統(tǒng)都沒有做路由攔截，如果知道模塊的路由，可以直接通過輸入路由信息來直接跳轉(zhuǎn)到特定模塊。對(duì)于一些模塊的權(quán)限，權(quán)限被管理員修改后也無法立即生效，所以對(duì)于這幾種情況做了如下思考與實(shí)踐。

權(quán)限被管理員修改后立即生效

對(duì)于這個(gè)需求，我的做法是，獲取到權(quán)限列表后，將權(quán)限信息存儲(chǔ)在 vuex store 中，并且使用getter函數(shù)，對(duì)于是否可以使用該權(quán)限進(jìn)行判斷，這樣一旦權(quán)限數(shù)據(jù)更新，前端權(quán)限限制功能點(diǎn)會(huì)自動(dòng)修改，從而做到權(quán)限的實(shí)時(shí)性，大致實(shí)現(xiàn)如下：

// vuex state.js
export default {
  userPrivileges: {
    admin: [],
    purchaser: []
  }, // 用戶權(quán)限信息
}

// vuex getters.js
export default {
  canIUse: state => (role, id) => state.userPrivileges[role].includes(id)
}

// 頁(yè)面具體小功能，通過 mapGetters 引入 canIUse 函數(shù)
<span v-if="canIUse('admin', 9)">{{scope.row.allocation_subtotal}}</span>

這樣一來，數(shù)據(jù)存儲(chǔ)在內(nèi)存中，那么權(quán)限信息就無法輕易的被修改，同時(shí)對(duì)于權(quán)限的判斷也非常簡(jiǎn)單，只需要在特定功能點(diǎn)傳入功能點(diǎn)的權(quán)限id就能判斷是否可以使用這個(gè)權(quán)限了。

但是將數(shù)據(jù)存儲(chǔ)在了內(nèi)存中也會(huì)遇到一個(gè)問題，頁(yè)面刷新怎么辦？接下來就是講解這種情況。

刷新頁(yè)面也可以進(jìn)行權(quán)限判斷

對(duì)于大模塊的權(quán)限攔截，肯定是通過路由鉤子來進(jìn)行攔截的（這種實(shí)現(xiàn)有很多文章講解過，這里不具體講解），但是通過路由鉤子進(jìn)行攔截的前提是，權(quán)限信息得提前存在。

刷新頁(yè)面會(huì)存在這種情況，頁(yè)面刷新時(shí)，先執(zhí)行的路由鉤子，再執(zhí)行的組件生命周期鉤子來請(qǐng)求權(quán)限的列表，此時(shí)權(quán)限信息不存在，那么頁(yè)面跳轉(zhuǎn)到登陸頁(yè)的話，體驗(yàn)就不夠友好。

所以我的做法是，建立一個(gè)中間頁(yè)，如果權(quán)限校驗(yàn)不通過，那么跳轉(zhuǎn)至中間頁(yè)，中間頁(yè)進(jìn)行權(quán)限的請(qǐng)求，請(qǐng)求到權(quán)限后，再判斷是否可以跳轉(zhuǎn)，這樣的話，刷新頁(yè)面體驗(yàn)就比較好。大致代碼如下：

// vuex actions.js
// 通過返回一個(gè)promise，使得store更新與后續(xù)代碼變?yōu)椤巴健眻?zhí)行
export default {
  getUserPrivileges({ commit }) {
    return fetch.get({
      url: '/currentstaff'
    }).then(data => {
      commit('SET_USER_PRIVILEGES_INFO', data.data)
      return data.data
    }).catch(e => {

    })
  }
}

// router.js
// 需要驗(yàn)證權(quán)限的路由
{
  path: 'suppliers',
  component: Suppliers,
  meta: {
    role: 'admin',
    privilegeId: 5
  }
}

function isCanUseThisModule(to, from) {
  return to.matched.every(record => {
    // 利用路由meta存儲(chǔ)相應(yīng)權(quán)限信息
    if (record.meta.role) {
      return store.getters.canIUse(record.meta.role, record.meta.privilegeId)
    } else {
      return true // 如果不需要權(quán)限，直接返回true
    }
  })
}

router.beforeEach((to, from, next) => {
  if (isCanUseThisModule(to, from)) {
    next() // 權(quán)限驗(yàn)證通過，跳轉(zhuǎn)下一路由
  } else {
    next({
      path: '/main/privilegeValidator' // 權(quán)限驗(yàn)證不通過時(shí)的中間頁(yè)
    })
  }
})

// 權(quán)限校驗(yàn)中間頁(yè)代碼示例
created() {
  this.$store.dispatch('getUserPrivileges').then(data => {
    for (let i = 0; i < data.admin_permissions.length; i++) {
      if (this.canIUse('admin', data.admin_permissions[i])) {
        this.$router.push({
          path: this.routerList.find(value => value.privilegeId === data.admin_permissions[i]).linkHref
        })
        return
      }
    }
    this.$router.push('/login') // 如果沒有任何權(quán)限，則跳轉(zhuǎn)登陸頁(yè)面
  })
}

用戶在登陸后也可以跳轉(zhuǎn)到這個(gè)權(quán)限中間頁(yè)，進(jìn)行權(quán)限判斷后再跳轉(zhuǎn)到對(duì)應(yīng)模塊。

以上是“vue后臺(tái)管理系統(tǒng)權(quán)限控制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！