iview 權限管理的實(shí)現

目錄

iview-admin2.0自帶的權限管理

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

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

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

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

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

/**
 * @param {Array} list 通過(guò)路由列表得到菜單列表
 * @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判斷權限的過(guò)程就比較明白了。代碼會(huì )獲取state里存放的用戶(hù)信息，主要是access，然后和路由允許的access進(jìn)行比對，如果用戶(hù)的access在路由access列表允許的范圍內就確權，例如用戶(hù)access的['admin','super_admin']，但是我們把文檔的access設置為['user']，

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

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

根據權限控制組件展示

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

自定義auth指令

iview-admin把自定義指令統一放在src/directive文件夾下，directives.js文件負責引入單獨定義在各個(gè)文件的自定義指令，統一導出。我們實(shí)現一個(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中導出了一個(gè)importDirective方法，入參是Vue，邏輯是注冊指令。

import directive from './directives'

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

export default importDirective

這個(gè)importDirective方法在main.js里面被用到了，并且把真實(shí)的Vue傳入做為入參。

import importDirective from '@/directive'
/**
 * 注冊指令
 */
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指令，并導出。在注入的時(shí)候進(jì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>

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

自定義auth組件

也可以通過(guò)自定義auth組件的方式來(lái)實(shí)現，創(chuàng )建一個(gè)函數式組件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>

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

import Auth from '_c/auth/auth.vue'
// 注冊組件
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>

總結

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

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

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

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