vue--按钮级别的权限控制+插件的使用

实现原理是根据v-if=true则展示按钮，否则不展示。

实现步骤：

1，用户登录成功后，将获取到的permissions放到localStorage进行保存。

2，写一个全局方法。此方法的入参为当前按钮的权限，比如somebtn:edit。最终输出的是布尔值，当前用户是否拥有此按钮的权限。

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

具体讲讲第2步的全局方法应该怎么使用：

全局方法的理论，他其实是向vue实例（Vue.prototype）添加的一个方法，这个方法在Vue初始化之前进行添加，这样Vue实例化之后，所有的组件都可以使用这个方法。根本上讲，就是Vue构造函数的一个实例方法。

使用方法，官方简单介绍了一下，那么这里就稍微详情的讲一下：

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

 1 let permissonFromStorage= window.localStorage;
 2 
 3  
 4 
 5 Plugin.install = function (Vue) {
 6 
 7   Vue.prototype.$auth = function (permission) {
 8 
 9     return permissonFromStorage.indexOf(permission)>-1;
10 
11   };
12 
13 };
14 
15 Vue.use(Plugin);
16 
17  
18 
19 export default Plugin;

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

1 import '@plugins/globalMethod';

3，页面上使用：

1 Data:
2 
3 data(){
4 
5 return{
6 
7 hasSomeAuth:this.$auth(‘btn:edit’)}
8 
9 }

Template: