快捷導(dǎo)航

iview 權(quán)限管理的實(shí)現(xiàn)

更新時(shí)間：2021年07月09日 10:38:51 作者：元素師

本文主要介紹了iview 權(quán)限管理，iview-admin2.0自帶權(quán)限管理?？梢酝ㄟ^設(shè)置路由的meta對(duì)象的參數(shù)access來分配權(quán)限。感興趣的可以了解一下

iview-admin2.0自帶的權(quán)限管理

iview-admin2.0自帶權(quán)限管理，可以通過設(shè)置路由的meta對(duì)象的參數(shù)access來分配權(quán)限。
默認(rèn)的角色是super_admin和admin，現(xiàn)在我們給文檔這個(gè)側(cè)邊欄項(xiàng)目分配一個(gè)只有user才能查看的權(quán)限

  {
    path: '',
    name: 'doc',
    meta: {
      title: '文檔',
      href: 'https://lison16.github.io/iview-admin-doc/#/',
      icon: 'ios-book',
      access: ['user']
    }
  },

側(cè)邊欄就不會(huì)顯示文檔這個(gè)欄目了。在src/store/module/app.js中獲取menuList，這個(gè)就是側(cè)邊欄的list

  getters: {
    menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access),
    errorCount: state => state.errorList.length
  },

這個(gè)getter方法主要是執(zhí)行了getMenuByRouter，接著查看src/libs/util.js找到具體代碼

/**
 * @param {Array} list 通過路由列表得到菜單列表
 * @returns {Array}
 */
export const getMenuByRouter = (list, access) => {
  let res = []
  forEach(list, item => {
    if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
      let obj = {
        icon: (item.meta && item.meta.icon) || '',
        name: item.name,
        meta: item.meta
      }
      if ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {
        obj.children = getMenuByRouter(item.children, access)
      }
      if (item.meta && item.meta.href) obj.href = item.meta.href
      if (showThisMenuEle(item, access)) res.push(obj)
    }
  })
  return res
}

const showThisMenuEle = (item, access) => {
  if (item.meta && item.meta.access && item.meta.access.length) {
    if (hasOneOf(item.meta.access, access)) return true
    else return false
  } else return true
}

到這里，access判斷權(quán)限的過程就比較明白了。代碼會(huì)獲取state里存放的用戶信息，主要是access，然后和路由允許的access進(jìn)行比對(duì)，如果用戶的access在路由access列表允許的范圍內(nèi)就確權(quán)，例如用戶access的['admin','super_admin']，但是我們把文檔的access設(shè)置為['user']，

hasOneOf(['admin','super_admin'],['user']) // false，鑒權(quán)失敗

hasOneOf是iview-admin的工具方法。用于判斷要查詢的數(shù)組是否至少有一個(gè)元素包含在目標(biāo)數(shù)組中，詳細(xì)代碼放在底部。

根據(jù)權(quán)限控制組件展示

一般我們還需要根據(jù)權(quán)限去控制頁面元素的展示，比如按鈕。有兩種方法，一種是自定義auth指令，或者自定義一個(gè)鑒權(quán)組件用來包裹需要鑒權(quán)的元素。

自定義auth指令

iview-admin把自定義指令統(tǒng)一放在src/directive文件夾下，directives.js文件負(fù)責(zé)引入單獨(dú)定義在各個(gè)文件的自定義指令，統(tǒng)一導(dǎo)出。我們實(shí)現(xiàn)一個(gè)auth指令：

import draggable from './module/draggable'
import clipboard from './module/clipboard'
import auth from './module/auth'
const directives = {
  draggable,
  clipboard,
  auth
}
export default directives

然后在src/directive/index.js中導(dǎo)出了一個(gè)importDirective方法，入?yún)⑹荲ue，邏輯是注冊(cè)指令。

import directive from './directives'

const importDirective = Vue => {
  /**
   * 拖拽指令 v-draggable="options"
   * options = {
   *  trigger: /這里傳入作為拖拽觸發(fā)器的CSS選擇器/,
   *  body:    /這里傳入需要移動(dòng)容器的CSS選擇器/,
   *  recover: /拖動(dòng)結(jié)束之后是否恢復(fù)到原來的位置/
   * }
   */
  Vue.directive('draggable', directive.draggable)
  /**
   * clipboard指令 v-draggable="options"
   * options = {
   *  value:    /在輸入框中使用v-model綁定的值/,
   *  success:  /復(fù)制成功后的回調(diào)/,
   *  error:    /復(fù)制失敗后的回調(diào)/
   * }
   */
  Vue.directive('clipboard', directive.clipboard)
  Vue.directive('auth', directive.auth) 
}

export default importDirective

這個(gè)importDirective方法在main.js里面被用到了，并且把真實(shí)的Vue傳入做為入?yún)ⅰ?br />

import importDirective from '@/directive'
/**
 * 注冊(cè)指令
 */
importDirective(Vue)
...

編輯src/directive/module/auth.js

import store from '@/store'
export default {
  inserted: (el, binding, vnode) => {
    const value = binding.value
    const access = store.state.user.access
    if (access.indexOf(value) === -1) {
      el.remove()
    }
  }
}

我們新增一個(gè)auth指令，并導(dǎo)出。在注入的時(shí)候進(jìn)行權(quán)限判斷，如果確權(quán)成功就不做什么，如果失敗就把元素刪除。
使用試試，拿頂部的折疊菜單按鈕做例子，beader-bar.vue

<template>
  <div class="header-bar">
    <sider-trigger v-auth="'admin'" :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    ...
  </div>
</template>

當(dāng)v-auth="'admin'"的時(shí)候顯示按鈕，如果是user則會(huì)隱藏按鈕。

自定義auth組件

也可以通過自定義auth組件的方式來實(shí)現(xiàn)，創(chuàng)建一個(gè)函數(shù)式組件auth.vue

<script>
import store from '@/store'
export default {
  functional: true,
  props: {
    authority: {
      type: String,
      require: true
    }
  },
  render (h, context) {
    const { props, scopedSlots } = context
    const access = store.state.user.access
    return access.indexOf(props.authority) > -1 ? scopedSlots.default() : null
  }
}
</script>

如果確權(quán)成功就返回slot，否則返回null，這樣被auth包裹的元素就不會(huì)展現(xiàn)了。然后把a(bǔ)uth.vue注冊(cè)為全局組件，免得每次使用都要import一下。編輯main.js

import Auth from '_c/auth/auth.vue'
// 注冊(cè)組件
Vue.component('Auth',Auth)

使用的時(shí)候直接用auth包裹組件即可

<template>
  <div class="header-bar">
    <Auth authority="user">
      <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    </Auth>
  </div>
</template>

總結(jié)

不論是用組件式的寫法還是自定義指令都能實(shí)現(xiàn)，組件的方式實(shí)現(xiàn)要寫的代碼多一點(diǎn)，用自定義指令比較靈活，此外有一點(diǎn)不同，自定義指令如果確權(quán)失敗，是把元素直接刪除掉了，所以此時(shí)如果再由admin改為user,元素還是不會(huì)展示的，因?yàn)橐呀?jīng)被刪除了嘛，需要刷新一下頁面才能顯示出來，但是如果是組件式的就不會(huì)，能夠靈活響應(yīng)。這個(gè)一般影響不大。

注意到我把a(bǔ)ccess設(shè)置為了一個(gè)String，如果設(shè)置為一個(gè)數(shù)組也可以，iview自帶的hasOneOf方法可以很好的使用

/**
 * @param {Array} target 目標(biāo)數(shù)組
 * @param {Array} arr 需要查詢的數(shù)組
 * @description 判斷要查詢的數(shù)組是否至少有一個(gè)元素包含在目標(biāo)數(shù)組中
 */
export const hasOneOf = (targetarr, arr) => {
  return targetarr.some(_ => arr.indexOf(_) > -1)
}

到此這篇關(guān)于iview 權(quán)限管理的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)iview 權(quán)限管理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: