安装

npm install @yangsansuan/vue-auth -S

使用

1. 引入 & 配置

import Auth from '@yangsansuan/vue-auth'
Vue.use(Auth, options)

options为插件的配置项：

{
  globalComponets: true, // 默认开启，给全局组件增加权限控制（包括第三方库，比如element，必须先引入库）
  directive: true, // 默认开启，给vue增加`v-auth`指令
  checker: fn // 权限的校验函数，fn必须返回一个Boolean值，false表示隐藏，fn接受一个参数（参见api）
}

一般来说只需要配置checker即可，此时直接将options配置为checker函数即可:

const checkAuthFn = function(xx){
  // ...
}
Vue.use(auth, checkAuthFn)

2. 使用

• 组件上使用

在组件上添加auth属性，其值会注入checker函数中，如果函数返回false则不会渲染此组件

<my-component auth="xx"></my-component>

• 标签上使用

在组件上添加v-auth指令，其值会注入checker函数中，如果函数返回false则会隐藏并删除此标签

<div v-auth="xxx"></div>

apis

options

1. globalComponets

Boolean，可选，默认开启。给全局组件增加权限控制，关闭后可能全局组件无法进行权限控制

2. directive

Boolean，可选，默认开启。给vue增加v-auth指令，在非组件元素上需要使用此指令进行权限控制

3. checker

Function，必填。权限的校验函数，用户在此函数中判断是否有权限

此函数接受一个参数（由auth属性或v-auth指令提供），并要求返回一个Boolean值

wrap

wrap(component)

用来包裹一个组件，返回一个函数式组件，然后使用返回的组件代替原组件在页面使用，这样就可以使用auth属性进行权限控制

regDirective

regDirective()

给vue增加v-auth指令

构建

npm run build

npm发版

1. 修改package.json中的version
2. 发布

npm publish