記一次Vue.js混入（mixin）的使用—分權限管理頁面

需求背景：在一個後臺的管理系統中，不同的用戶角色對應不同的用戶權限。現要求，同一個頁面對有操作權限的用戶來說是可操作的，對無操作權限的用戶來說是隻讀的，即操作按鈕均失效。系統用Vue.js開發。

一、mixin的概念

官方文檔這麼說：混入是一種分發Vue組件中可服用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

我自己的理解：混入對象具有Vue組件可以聲明的所有選項，如[components]、[computed]、[methods]等；當組件使用混入對象時，該組件也同時擁有了混入對象的選項。

二、思路

按照開篇寫的需求描述，如果用一般的方法，我們通常會在每個頁面的vue文件中，判斷當前用戶是否具有操作該頁面的權限，根據判斷結果來展示頁面。然而，這種方法會導致大量代碼的重複，徒然增加了一些無意義的工作量。因此，需要有一個可以複用的方法。

故此，我們可以把上述的可複用的辦法放在混入對象的選項當中。

三、代碼展示

在混入對象的computed選項中，我們有這幾個方法，來判斷用戶所擁有的的‘編輯’、‘查看’、‘刪除’等權限。

computed: {
    allowedToCreate() {
      return this.hasOperatePermissions('createRole');
    },
    allowedToEdit() {
      return this.hasOperatePermissions('editRole');
    },
    allowedToCheckIn() {
      return this.hasOperatePermissions('checkInRole');
    },
    allowedToDelete() {
      return this.hasOperatePermissions('deleteRole');
    },    
 },

注意，如果普通組件中引用了混入對象，那麼這些計算屬性會自動成爲組件的計算屬性。具體如何創建一個混入對象，並且引入該混入對象，這裏不細講，可參考官方文檔。