按鈕鑒權是一種前端開發(fā)中比較重要的技術，主要用來控制不同用戶在不同權限下所能看到、操作的按鈕，有效地保障系統(tǒng)安全性。Vue中也提供了很好的支持，可以通過簡單的代碼實現(xiàn)按鈕鑒權。

Vue中可以使用指令來控制按鈕的顯示和隱藏，例如v-if和v-show。但是，這些指令只能根據(jù)靜態(tài)的數(shù)據(jù)進行判斷，不能根據(jù)當前用戶的權限進行動態(tài)判斷。因此我們需要借助Vue提供的mixin和指令來實現(xiàn)動態(tài)的按鈕鑒權。

Vue.mixin({
methods: {
checkPermission(permission) {
//這里可以根據(jù)自己的業(yè)務邏輯進行權限判斷，返回true或false
return true;
}
}
});
Vue.directive('permission', {
inserted: function (el, binding) {
if (!Vue.prototype.checkPermission(binding.value)) {
el.parentNode.removeChild(el);
}
}
});

上面的代碼中，我們定義了一個名為permission的指令，指令的功能是根據(jù)當前用戶的權限來判斷按鈕是否顯示。例如我們在vue組件里的button標簽中添加v-permission指令來控制按鈕的顯示，如下所示：

<button v-permission="'add_user'">添加用戶</button>

當Vue編譯到該button標簽時，會觸發(fā)permission指令，判斷當前用戶是否有添加用戶的權限，如果沒有，則將該按鈕從DOM中移除。

如果有些頁面需要同時控制多個按鈕的權限，我們也可以通過Vue的mixins混入來實現(xiàn)。假設我們有一個userList頁面，其中包含三個按鈕：添加用戶、編輯用戶和刪除用戶。我們可以使用mixins來控制這三個按鈕的權限，如下所示：

export const userListMixin = {
data() {
return {
addButtonPermission: 'add_user',
editButtonPermission: 'edit_user',
deleteButtonPermission: 'delete_user'
};
},
methods: {
checkPermissions() {
if (!this.checkPermission(this.addButtonPermission)) {
this.addButtonVisible = false;
}
if (!this.checkPermission(this.editButtonPermission)) {
this.editButtonVisible = false;
}
if (!this.checkPermission(this.deleteButtonPermission)) {
this.deleteButtonVisible = false;
}
}
},
created() {
this.checkPermissions();
}
};

如上代碼所示，我們在mixins中定義了三個變量：addButtonPermission、editButtonPermission和deleteButtonPermission，分別表示添加用戶、編輯用戶和刪除用戶按鈕的權限。然后在checkPermissions方法中，根據(jù)用戶的權限來判斷這三個按鈕是否顯示。最后在created生命周期中調(diào)用checkPermissions方法來控制這三個按鈕的顯示。

總之，Vue提供的mixin和指令功能非常強大，可以幫助我們實現(xiàn)許多動態(tài)的邏輯，例如按鈕鑒權。使用Vue來控制按鈕的顯示和隱藏，可以大大減少開發(fā)時的工作量，并且增強了系統(tǒng)的安全性。同時，我們需要注意合理的代碼組織和業(yè)務邏輯的劃分，以達到更好的效果。