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>