vue--按鈕級別的權限控制+插件的使用

 

實現原理是根據v-if=true則展示按鈕，否則不展示。

實現步驟：

1，用戶登錄成功后，將獲取到的permissions放到localStorage進行保存。

2，寫一個全局方法。此方法的入參為當前按鈕的權限，比如somebtn:edit。最終輸出的是布爾值，當前用戶是否擁有此按鈕的權限。

3，在組件中使用此方法。

 

具體講講第2步的全局方法應該怎么使用：

全局方法的理論，他其實是向vue實例（Vue.prototype）添加的一個方法，這個方法在Vue初始化之前進行添加，這樣Vue實例化之后，所有的組件都可以使用這個方法。根本上講，就是Vue構造函數的一個實例方法。

使用方法，官方簡單介紹了一下，那么這里就稍微詳情的講一下：

1，新建一個hasAuth.js文件，export的是Plugin:

let permissonFromStorage= window.localStorage;

 

Plugin.install = function (Vue) {

  Vue.prototype.$auth = function (permission) {

    return permissonFromStorage.indexOf(permission)>-1;

  };

};

Vue.use(Plugin);

 

export default Plugin;

 

 

2，在main.js中，引入hasAuth：

 import '@plugins/globalMethod'; 

 

3，頁面上使用：

Data:

data(){

return{

hasSomeAuth:this.$auth(‘btn:edit’)}

}

 

Template:

<button v-if=”hasSomeAuth”>按鈕</button>