Vue.directive指令實現按鈕級別權限控制

Vue.directive文檔：

https://cn.vuejs.org/v2/guide/custom-directive.html

使用

定義一個按鈕級別指令

// 獲取用戶角色, 可以從cookie中獲取 function getRole() { return 'admin' } // 校驗用戶權限，傳入一個數組 function hasPermission(role) { return role.includes(getRole()) } // 注冊一個全局自定義指令 `v-role` Vue.directive('role', { inserted: (el, binding, vnode) => { // 如果沒有權限就移除此節點 if (!hasPermission(binding.value)) { el.parentNode.removeChild(el); } } })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

使用示例

1

2

3

4

5

6

7

8

問題：el.parentNode獲取不到

將bind替換為inserted

參考

Vue 指令實現按鈕級別權限管理功能

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。