/vue-auth

vue权限控制插件

Primary LanguageJavaScript

安装

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)
  1. 使用
  • 组件上使用

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

<my-component auth="xx"></my-component>
  • 标签上使用

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

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

apis

options

  1. globalComponets

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

  1. directive

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

  1. 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

实现原理

  1. 对于标签 通过自定义指令(v-auth)传入的权限字段,决定是不是隐藏并移除标签

  2. 对于组件 函数式组件可以实现完全透传,实现HOC组件包裹组件,通过prop(auth)传入的权限字段决定是否渲染组件

  • 对于全局组件 遍历所有的全局组件(Vue.options.components),使用HOC包裹后覆盖

  • 对于组件内的局部组件 在beforeCreate生命周期遍历局部组件,使用HOC包裹后覆盖