1. vue-authplugin

vue-authplugin

vue-authplugin

npm
Packagist

an elegant view auth control plugin, support directive and prototype methods.

Installation

 $ npm install vue-authplugin

Demo

 import authPlugin from 'vue-authplugin'

Vue.use(authPlugin, {

    permissionCode: [101, 102, 103, 104, 105],
    permissionCodeMap: new Map([
      ['AUTH_LOGIN', 101],
      ['AUTH_SUBMIT', [102, 103]],
    ])
})

after init, we can use directives or methods in template:

<template>
  <!-- show Login btn if 101 is exists -->
  <button v-auth="'101'">Login</button>
  <!-- AUTH_LOGIN is Map to 101 -->
  <button v-auth="'AUTH_LOGIN'">Login</button>

  <!-- show Submit1 btn if 102 or 103 is exists -->
  <button v-auth="[102, 103]">Submit1</button>
  <button v-auth="'AUTH_SUBMIT'">Submit2</button>
</template>

check(code)

The check parameter is very flexible. It can be used in the following ways:

  • Pass in String and check if the permissionCode contains this code.
  • Pass Array to check if the permissionCode contains any of the code in the array
  • Pass in Object, check whether all key values pass the check, key is the auth name, and value is whether this permission is needed
  • Pass the key of permissionCodeMap, the actual check detection object is the mapped value

Usage

If you use this.$_auth.check to check the success or failure, it will return true or false; using the directives v-auth, if the check is successful, the data-auth="success" attribute will be added to the dom method. If the verification fails, data will be added. data-auth="fail" and set display: none.

Init

For init plugin, below is the options can be configure:

key desc type default required
name v-{name} and prototype $_{name} String auth false
permissionCode auth table Array [] true
permissionCodeMap mapping table Object {} false

Methods

initPermissionCode(permissionCode)

  • Arguments
    • { Array | Map } permissionCode

Sometimes permissionCode would change, so can use it to update permissionCode. Remember to use it before the beforeCreate lifecycle or beffore

check(code)

  • Arguments
    • {String | Object | Array} auth
  • Return
    • true or false

Find the permissionCode, check that the required code are satisfied, return true if it is satisfied, otherwise return false.