1、前言

　　上篇，我們講了後端的授權。與後端不同，前端主要是通過功能入口如選單、按鈕的顯隱來控制授權的。具體來講，就是根據指定使用者的制定許可權來載入對應側邊欄選單和頁面內的功能按鈕。我們一個個來講。

2、側邊欄選單

　　鑑於本專案使用了vue-router，那顯然，側邊欄就會跟對應路由關聯，同時，前端專案會註冊路由導航事件，此事件見src根目錄下permission.js：

 　　截圖中，上邊的紅框代表是在註冊路由跳轉前回調鉤子，此鉤子可以根據具體情況決定是否需要導航到目的路由或導航到其他路由。下邊的紅框先呼叫menu store中的獲取側邊欄action，從後端拿到本使用者具有許可權的側邊欄選單：

 　　從後端拿到側邊欄選單json，前端是沒辦法直接使用的，一堆json物件或者字串，與Vue路由、檢視並沒法兒無縫銜接，所以上邊我們看到呼叫了travseRoutes方法，此方法在前端工具類route.js中，如下：

 　　主要用意就是經由後端動態選單配置前端vue-router動態路由，用到了vue-router中路由懶載入這個重要的特性。以上就是前端動態側邊欄的實現。

3、功能按鈕

　　大部分專案都做到了選單級的許可權控制，但做到頁面級別的，倒是不多。畢竟他該多，而且也是要費點兒功夫的。那這裡我們就來看看前端是如何實現按鈕級許可權控制的。

　　一般而言，元件顯隱可以通過v-show或v-if，但若通過這種方式，恐怕得在viewmodel中定義大量屬性，最好的情況，也得在需要控制的地方頂一個計算屬性吧，這種方式恐怕代價還是有一些的。針對這點，web-flash前端專案中，很巧妙地用到了自定義Vue指令這個特性，將按鈕的載入與去除邏輯封裝了起來，具體在前端專案src/directive/permission.js中：

import store from '@/store'

export default{
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters && store.getters.permissions
    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value
      const hasPermission = permissions.some(permission => {
        return permissionRoles.includes(permission)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
    }
  }
}

　　自定義指令有幾種型別鉤子函式，這裡選取了inserted，代表是在元素插入後判斷有無指定按鈕許可權，如果沒有，則從介面再移除。接下來，我們就實際看看效果。首先，在使用者管理對應的檢視js中引入自定義指令：

 　　然後，我們在使用者檢視檔案中對新增、編輯、刪除使用者幾個按鈕用自定義指令做許可權控制：

 <el-col :span="24">
          <el-button type="success" size="mini" icon="el-icon-plus" @click.native="add" v-permission="['/mgr/add']">
            {{$t('button.add') }}
          </el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" @click.native="edit" v-permission="['/mgr/edit']">
            {{$t('button.edit') }}
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="remove" v-permission="['/mgr/delete']">
            {{$t('button.delete') }}
          </el-button>
          <el-button type="info" size="mini" icon="el-icon-role" @click.native="openRole">角色分配</el-button>
        </el-col>
      </el-row>

　　之後，我們用一個不具有用增刪改許可權的使用者登入系統：

 　　可以看到，新增、修改、刪除使用者選單是不可見的。那現在我把新增按鈕的v-permission指令拿掉，則再看效果：

 　　可見，拿掉v-perission，新增使用者按鈕顯示出來了，反面說明前端授權生效了。

&n