feature[permission]: add v-permission (#653)

This commit is contained in:
花裤衩 2018-05-08 22:15:34 +08:00 committed by GitHub
parent 1e103cf151
commit 597df4844a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 163 additions and 40 deletions

View file

@ -0,0 +1,13 @@
import permission from './permission'
const install = function(Vue) {
Vue.directive('permission', permission)
}
if (window.Vue) {
window['permission'] = permission
Vue.use(install); // eslint-disable-line
}
permission.install = install
export default permission

View file

@ -0,0 +1,23 @@
import store from '@/store'
export default{
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters && store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const permissionRoles = value
const hasPermission = roles.some(role => {
return permissionRoles.includes(role)
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`need roles! Like v-permission="['admin','editor']"`)
}
}
}

View file

@ -4,6 +4,8 @@ export default {
introduction: 'Introduction',
documentation: 'Documentation',
permission: 'Permission',
pagePermission: 'Page Permission',
directivePermission: 'Directive Permission',
icons: 'Icons',
components: 'Components',
componentIndex: 'Introduction',

View file

@ -4,6 +4,8 @@ export default {
introduction: '简述',
documentation: '文档',
permission: '权限测试页',
pagePermission: '页面权限',
directivePermission: '指令权限',
icons: '图标',
components: '组件',
componentIndex: '介绍',

View file

@ -67,16 +67,28 @@ export const asyncRouterMap = [
path: '/permission',
component: Layout,
redirect: '/permission/index',
meta: { roles: ['admin'] }, // you can set roles in root nav
alwaysShow: true, // will always show the root menu
meta: {
title: 'permission',
icon: 'lock',
roles: ['admin', 'editor'] // you can set roles in root nav
},
children: [{
path: 'index',
component: _import('permission/index'),
name: 'permission',
path: 'page',
component: _import('permission/page'),
name: 'pagePermission',
meta: {
title: 'permission',
icon: 'lock',
title: 'pagePermission',
roles: ['admin'] // or you can only set roles in sub nav
}
}, {
path: 'directive',
component: _import('permission/directive'),
name: 'directivePermission',
meta: {
title: 'directivePermission'
// if do not set roles, means: this page does not require permission
}
}]
},

View file

@ -0,0 +1,30 @@
<template>
<div>
<div style="margin-bottom:15px;">{{$t('permission.roles')}} {{roles}}</div>
{{$t('permission.switchRoles')}}
<el-radio-group v-model="switchRoles">
<el-radio-button label="editor"></el-radio-button>
<el-radio-button label="admin"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
export default {
computed: {
roles() {
return this.$store.getters.roles
},
switchRoles: {
get() {
return this.roles[0]
},
set(val) {
this.$store.dispatch('ChangeRoles', val).then(() => {
this.$emit('change')
})
}
}
}
}
</script>

View file

@ -0,0 +1,56 @@
<template>
<div class="app-container">
<switch-roles @change="handleRolesChange" />
<div :key="key" style="margin-top:30px;">
<span v-permission="['admin']" class="permission-alert">
Only <el-tag class="permission-tag" size="small">admin</el-tag> can see this
</span>
<span v-permission="['editor']" class="permission-alert">
Only <el-tag class="permission-tag" size="small">editor</el-tag> can see this
</span>
<span v-permission="[]" class="permission-alert">
Both <el-tag class="permission-tag" size="small">admin</el-tag> and <el-tag class="permission-tag" size="small">editor</el-tag> can see this
</span>
</div>
</div>
</template>
<script>
import permission from '@/directive/permission/index.js' //
import SwitchRoles from './components/SwitchRoles'
export default{
name: 'directivePermission',
components: { SwitchRoles },
directives: { permission },
data() {
return {
key: 1 //
}
},
methods: {
handleRolesChange() {
this.key++
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
/deep/ .permission-alert {
width: 320px;
margin-top: 30px;
background-color: #f0f9eb;
color: #67c23a;
padding: 8px 16px;
border-radius: 4px;
display: block;
}
/deep/ .permission-tag{
background-color: #ecf5ff;
}
}
</style>

View file

@ -1,34 +0,0 @@
<template>
<div class="app-container">
<div style="margin-bottom:15px;">{{$t('permission.roles')}} {{roles}}</div>
{{$t('permission.switchRoles')}}
<el-radio-group v-model="switchRoles">
<el-radio-button label="editor"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default{
name: 'permission',
data() {
return {
switchRoles: ''
}
},
computed: {
...mapGetters([
'roles'
])
},
watch: {
switchRoles(val) {
this.$store.dispatch('ChangeRoles', val).then(() => {
this.$router.push({ path: '/permission/index?' + +new Date() })
})
}
}
}
</script>

View file

@ -0,0 +1,19 @@
<template>
<div class="app-container">
<switch-roles @change="handleRolesChange" />
</div>
</template>
<script>
import SwitchRoles from './components/SwitchRoles'
export default{
name: 'pagePermission',
components: { SwitchRoles },
methods: {
handleRolesChange() {
this.$router.push({ path: '/permission/index?' + +new Date() })
}
}
}
</script>