很多後臺管理系統會用到權限管理，菜單權限比較好控制，按鈕權限就複雜一些，本文介紹的就是按鈕權限如何控制，用的是 vue 項目。

權限控制描述

前端需要根據後端傳來的權限數據控制是否顯示新增、編輯、刪除（紅框所示部分）功能。

菜單管理處設置的新增、刪除、編輯權限參數如圖紅框所示部分

如何實現

1、儲存權限數據

首先將權限控制的數據儲存到 vuex 或者 sessionstorage 中，或者全局變量。

如何獲得權限數據並提交到 vuex 的博文

https://blog.csdn.net/weixin_44849078/article/details/89184039

2、權限判斷方法

以新增按鈕爲例, 因爲設置的新增菜單權限參數爲 "line-add"，所以 html 標籤如下，v-has 爲 vue 自定義指令，line-add 爲儲存在後臺的權限參數

store.getters.getMenuBtnList 爲儲存在 vuex 中的菜單按鈕數據，遍歷對比 permission 字段是否與標籤中的自定義參數 line_add 相等，匹配成功則表明有權限，失敗沒有權限，返回 false。

3、設置 vue 自定義指令

註冊一個全局自定義指令並監控它

結果發現報錯了，調試後發現 el.parentNode 爲 null，所以 removeChild 方法報錯，我猜可能是因爲 bind 鉤子觸發時父元素還沒有生成，所以換成 inserted 鉤子。

inseted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

4、最終代碼與效果

使用 inserted 後成功實現沒有權限的按鈕隱藏效果，代碼如下：

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/e5vYAXF_LU4uEsDbruFY_A