v-auth

用户权限指令组件

指令从 sessionStorage 获取到 user_role_code 的数据来判定用户对元素的可见及点击权限 默认sessionStorage存的key名称user_role_code，可以通过Vue.use(Auth, {sessionName: 'your store name'})

Installation

npm install kz-auth

Usage

Import

ES6

import Vue from 'vue'
import Auth from 'kz-auth'
Vue.use(Auth, {
  sessionName: 'role_code'
})

ES5

var Vue = require('vue')
var Auth = require('kz-auth')
Vue.use(Auth)

先设置权限

// Test User_Role_Code
const setUserAuth = (() => {
  const userRoleCode =  {
    '007': 1,
    '008': 2,
    '009': 0
  }
  // 存放到 sessionStorage 的 user_role_code 字段
  window.sessionStorage.setItem('user_role_code', JSON.stringify(userRoleCode))
})()

new Vue({
  el: '#app',
  render: h => h(App)
})

HTML structure

<ul>
  <li><button v-auth="{ methods: handleClick, code: '007', data: '007' }">可见可点击</button></li>
  <li><button v-auth="{ methods: handleClick, code: '008', data: '008', reject: handleClickReject }">可见不可点击</button></li>
  <li><button v-auth="{ methods: handleClick, code: '009', data: '009' }">不可见</button></li>
</ul>

vue 定义

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    handleClick (proxy) {
      alert(proxy.data)
    },
    handleClickReject (el, code) {
      alert(`权限不足，权限码：${code}`)
    }
  }
}

Props

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.