iview権限管理の実装

  {
    パス： ''、
    名前: 'doc',
    メタ: {
      タイトル: 'ドキュメント'、
      href: 'https://lison16.github.io/iview-admin-doc/#/',
      アイコン: 'ios-book',
      アクセス: ['ユーザー']
    }
  },

  ゲッター: {
    メニューリスト: (状態、ゲッター、ルート状態) => getMenuByRouter(ルーター、ルート状態.user.access)、
    エラーカウント: 状態 => 状態.errorList.length
  },

/**
 * @param {Array} list ルートリストからメニューリストを取得します * @returns {Array}
 */
エクスポート const getMenuByRouter = (リスト、アクセス) => {
  res = [] とします
  forEach(リスト、項目 => {
    if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
      obj = {
        アイコン: (item.meta && item.meta.icon) || ''、
        名前: アイテム名、
        メタ: アイテム.meta
      }
      if ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {
        obj.children = getMenuByRouter(item.children、アクセス)
      }
      if (item.meta && item.meta.href) obj.href = item.meta.href
      if (showThisMenuEle(item, access)) res.push(obj)
    }
  })
  戻り値
}

const showThisMenuEle = (item, access) => {
  if (item.meta && item.meta.access && item.meta.access.length) {
    if (hasOneOf(item.meta.access, access)) が true を返す
    それ以外の場合はfalseを返す
  } それ以外の場合はtrueを返す
}

hasOneOf(['admin','super_admin'],['user']) // false、認証失敗

'./module/draggable' からドラッグ可能なものをインポートします
'./module/clipboard' からクリップボードをインポートします
'./module/auth' から auth をインポートします
constディレクティブ = {
  ドラッグ可能、
  クリップボード、
  認証
}
デフォルトディレクティブをエクスポートする

'./directives' からディレクティブをインポートします

const importDirective = Vue => {
  /**
   * ドラッグコマンド v-draggable="options"
   * オプション = {
   * トリガー: /ドラッグトリガーとしてCSSセレクターを渡す/、
   * body: /移動するコンテナのCSSセレクタを渡す/,
   * 回復: /ドラッグ終了後に元の位置に戻すかどうか/
   * }
   */
  Vue.directive('ドラッグ可能', directive.draggable)
  /**
   * クリップボードディレクティブ v-draggable="options"
   * オプション = {
   * value: /入力ボックス内のv-modelにバインドされた値/、
   * 成功: /コピー成功後のコールバック/、
   * エラー: /コピー失敗後のコールバック/
   * }
   */
  Vue.directive('クリップボード', directive.clipboard)
  Vue.directive('auth', directive.auth) 
}

エクスポート デフォルト インポート ディレクティブ

'@/directive' から importDirective をインポートします
/**
 * 登録手順 */
インポートディレクティブ(Vue)
...

'@/store' からストアをインポートします
エクスポートデフォルト{
  挿入: (el, バインディング, vnode) => {
    const 値 = バインディング値
    定数アクセス = store.state.user.access
    if (access.indexOf(値) === -1) {
      el.削除()
    }
  }
}

<テンプレート>
  <div class="ヘッダーバー">
    <sider-trigger v-auth="'admin'" :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    ...
  </div>
</テンプレート>

<スクリプト>
'@/store' からストアをインポートします
エクスポートデフォルト{
  機能的: 真、
  小道具: {
    権限：
      タイプ: 文字列、
      必要: true
    }
  },
  レンダリング(h, コンテキスト) {
    const { props, scopedSlots } = コンテキスト
    定数アクセス = store.state.user.access
    access.indexOf(props.authority) > -1 を返します ? scopedSlots.default() : null
  }
}
</スクリプト>

'_c/auth/auth.vue' から Auth をインポートします。
// コンポーネントを登録する Vue.component('Auth',Auth)

<テンプレート>
  <div class="ヘッダーバー">
    <認証権限="ユーザー">
      <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    </認証>
  </div>
</テンプレート>

/**
 * @param {Array} target ターゲット配列* @param {Array} arr クエリする配列* @description クエリする配列の少なくとも 1 つの要素がターゲット配列に含まれているかどうかを判断します*/
エクスポート const hasOneOf = (targetarr, arr) => {
  ターゲットarr.some(_ => arr.indexOf(_) > -1) を返します
}