Skip to content
a simple Vue auth verify plugin.
JavaScript TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore refactor: move to typescript Aug 31, 2019
package-lock.json refactor: move to typescript Aug 31, 2019


npm Packagist

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


$ npm install vue-authplugin


import authPlugin from 'vue-authplugin'

Vue.use(authPlugin, {
    authCode: [101, 102, 103, 104, 105],
    authMap: new Map([
      ['AUTH_LOGIN', 101],
      ['AUTH_SUBMIT', [102, 103]],

after init, we can use directives or methods in 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>

  <!-- show Fetch btn if 105:exist and 106:miss -->
  <button v-if"$_auth.verify({105: true, 106: false})">Fetch</button>


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

  • Pass in String and check if the authCode contains this code.
  • Pass Array to check if the authCode 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 authMap, the actual check detection object is the mapped value


If you use this.$_auth.verify to verify the success or failure, it will return true or false; using the directives v-auth, if the verify 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.


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

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



  • Arguments
    • { Array | Map } authCode

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


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

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

You can’t perform that action at this time.