vue.js除了動態路由，前端權限還能夠這麼玩

索引

• 概述
• 基於指令
• 基於組件
• 權限的定義

概述

關於動態路由的相關處理，請參考本人的另外一篇文章vue.js先後端分離後臺，該如何根據用戶權限處理前端顯示和後臺接口訪問，本文做爲上一篇的續做
有時候僅處理菜單，是不夠的，不少狀況下，有讀的權限，但無寫的權限的時候，就須要更靈活的控制。也就是這篇文章的由來。

大概有兩種方式能夠使用：

1. 指令
2. 組件

基於指令

關於指令的使用，網上的文章比較多了，主要是操做DOM，把沒有權限的元素從已渲染的畫面裏面刪除。這裏只是簡單的出個示範，具體能夠參考本身的受權系統開發：

import Vue from 'vue'
// import Store from '../store/'

const directives = {
  role: {
    // 指令的定義 (TBD：有沒有before'inserted'這樣的鉤子函數用？)
    inserted: (el, binding, vnode) => {
      // 權限
      if (binding.value && [處理權限的斷定]) {
        el.parentElement.removeChild(el)
      }
    }
  }
}

Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

<el-button type="success" icon="el-icon-document" size="small" v-role="xxx-upload"
                   @click="$router.push({name: 'music-album-multi-upload'})">上傳
        </el-button>

基於組件

不肯定對於vue組件，有沒有全局的生命週期鉤子，若是有的話，處理起來就更方便了。
下面就以普通的組件形式來講明下處理過程：

寫一個全局的組件，註冊爲v-sec，其中參數code爲訪問當前畫面segment的受權碼。

<template>
  <div>
    <slot v-if="permitted"></slot>
  </div>
</template>

<script>
  import vuet from '@/vuet/'

  export default {
    name: "sec",
    props: {
      code: {
        type: String,
        required: true,
        default: 'text'
      },
    },
    data() {
      return {
        permitted: false
      }
    },
    beforeCreate() {
      let userSelf = vuet.getModule('user-self')
      if (userSelf /* && userSelf.secCodes && userSelf.secCodes.contains(this.code) */) {
        this.$nextTick(function () {
          this.permitted = true
        })
      }
    }
  }
</script>

而後在畫面上使用

<v-sec code="xxx-add">
  <el-button type="success" icon="el-icon-document" size="small"
             @click="$router.push('/sys/module/add')">添加
  </el-button>
</v-sec>

與指令的那種方式在使用方面差很少，若是組件的這種方式能避免內嵌的組件被渲染，那效果會比指令的那種好一些。

接下來，在項目只可能就兩種方式分別作實驗。

權限的定義

畫面

通常經過導航+動態路由能控制住的，像畫面和菜單。
而後配合路由的全局函數router.beforeEach基本上比較好實現。
爲了配合動態路由，須要指定如下幾個字段

• 路徑，用於畫面跳轉，
• 組件名/文件地址，用於路由生成，指向實際的vue文件（咱們能夠約定-代替路徑分隔符:common-main=/src/pages/common/main.vue）
• 畫面名，用於顯示，導航或Title等地方須要
• icon，有一些樣式庫裏有這個，做爲可選項
• show_nav，是否顯示在導航中，有一些畫面須要參數的話，不可以直接從導航進入，可區分開

頁面片斷

基本上標記個名字，與畫面關聯起來以便於管理就能夠了。
而後配置後臺管理系統，能夠經過先經過後臺錄入畫面及畫面片斷，而後用程序生成對應的vue文件及部分代碼。這樣子開發效率是否是高一些？

• 畫面ID
• 片斷編碼，不直接使用DB的ID自增，以免在不一樣的系統間數據遷移時的問題。
• 片斷名，在受權畫面展現以方便管理

受權

受權時，把畫面和畫面片斷與角色關聯便可，而後用戶在登陸後獲取到角色，再從內存/DB/緩存中把角色對應的畫面和菜單等權限查出，合併到一塊兒返回給vue。vue拿到數據後，緩存到localstorage以免畫面的刷新(f5/瀏覽器刷新)後出現404的問題，這一點在上一篇裏面已經說明過了。