iview 권한 관리의 실현

iview-admin 2.0 자체 권한 관리
iview-admin 2.0 자체 권한 관리,경로 설정 meta 대상 의 매개 변수 access 를 통 해 권한 을 분배 할 수 있 습 니 다.
기본 캐릭터 는 슈퍼admin 과 admin,현재 문서 의 사 이 드 바 항목 에 user 만 볼 수 있 는 권한 을 할당 합 니 다.

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

사 이 드 바 는 문서 라 는 항목 을 표시 하지 않 습 니 다.src/store/module/app.js 에서 menuList 를 가 져 옵 니 다.이것 이 바로 사 이 드 바 의 list 입 니 다.

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

이 getter 방법 은 주로 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 가 권한 을 판단 하 는 과정 이 비교적 명확 하 다.코드 는 state 에 저 장 된 사용자 정 보 를 가 져 옵 니 다.주로 access 를 가 져 온 다음 에 경로 가 허용 하 는 access 와 비교 합 니 다.만약 에 사용자 의 access 가 access 목록 에서 허용 하 는 범위 내 에서 확정 권 을 가 집 니 다.예 를 들 어 사용자 access 의[admin],'superadmin'],그러나 우 리 는 문서 의 access 를[user]로 설정 합 니 다.

hasOneOf(['admin','super_admin'],['user']) // false，    

hasOne Of 는 iview-admin 의 도구 방법 입 니 다.조회 할 배열 에 최소한 하나의 요소 가 대상 배열 에 포함 되 어 있 는 지 판단 하 는 데 사용 되 며,상세 코드 는 아래쪽 에 놓 여 있 습 니 다.
권한 에 따라 구성 요소 보 여주 기
일반적으로 우 리 는 버튼 과 같은 페이지 요소 의 전 시 를 권한 에 따라 제어 해 야 한다.두 가지 방법 이 있 습 니 다.하 나 는 auth 명령 을 사용자 정의 하거나 인증 이 필요 한 요 소 를 감 싸 는 데 사용 할 인증 구성 요 소 를 사용자 정의 하 는 것 입 니 다.
사용자 정의 auth 명령 어
iview-admin 은 사용자 정의 명령 을 src/directive 폴 더 에 통일 시 키 고 directives.js 파일 은 각 파일 에 대한 사용자 정의 명령 을 도입 하여 통일 적 으로 내 보 냅 니 다.우 리 는 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 에서 importDirective 방법 을 내 보 냈 습 니 다.입력 은 Vue 이 고 논 리 는 등록 명령 입 니 다.

import directive from './directives'

const importDirective = Vue => {
  /**
   *      v-draggable="options"
   * options = {
   *  trigger: /            CSS   /,
   *  body:    /           CSS   /,
   *  recover: /                /
   * }
   */
  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

이 importDirective 방법 은 main.js 에서 사용 되 었 으 며,실제 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()
    }
  }
}

auth 명령 을 추가 하고 내 보 냅 니 다.주입 할 때 권한 판단 을 하고 확실한 권한 이 성공 하면 아무것도 하지 않 으 며 실패 하면 요 소 를 삭제 합 니 다.
사용 해 보 세 요.상단 접 기 메뉴 단 추 를 예 로 들 면 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"일 때 단 추 를 표시 합 니 다.user 라면 단 추 를 숨 깁 니 다.

사용자 정의 auth 구성 요소
auth 구성 요 소 를 사용자 정의 하 는 방식 으로 함수 식 구성 요소 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 에 포 함 된 요 소 는 나타 나 지 않 습 니 다.그리고 auth.vue 를 전역 구성 요소 로 등록 하여 매번 import 를 사용 하지 않도록 합 니 다.main.js 편집

import Auth from '_c/auth/auth.vue'
//     
Vue.component('Auth',Auth)

사용 할 때 auth 패키지 구성 요 소 를 직접 사용 하면 됩 니 다.

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

총결산
구성 요소 식 쓰기 나 사용자 정의 명령 으로 도 가능 합 니 다.구성 요소 의 방식 은 쓸 코드 가 많 고 사용자 정의 명령 으로 유연 합 니 다.그 밖 에 한 가지 다른 점 이 있 습 니 다.사용자 정의 명령 이 확실 하지 않 으 면 요 소 를 직접 삭제 합 니 다.그래서 이때 admin 에서 user 로 바 꾸 면 요 소 는 보이 지 않 습 니 다.이미 삭제 되 었 기 때 문 입 니 다.페이지 를 새로 고 쳐 야 표시 할 수 있 지만 구성 요소 식 이 라면 할 수 없고 유연 하 게 응답 할 수 있 습 니 다.이것 은 일반적으로 영향 이 크 지 않다.
access 를 String 으로 설정 한 것 을 알 게 되 었 습 니 다.하나의 배열 로 설정 해도 됩 니 다.iview 가 가지 고 있 는 hasOne Of 방법 은 잘 사용 할 수 있 습 니 다.

/**
 * @param {Array} target     
 * @param {Array} arr        
 * @description                          
 */
export const hasOneOf = (targetarr, arr) => {
  return targetarr.some(_ => arr.indexOf(_) > -1)
}

iview 권한 관리의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 iview 권한 관리 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!