在前端處理按鈕權(quán)限
使用vue自定義指令來(lái)v-permission 來(lái)控制按鈕
詳細(xì)代碼
//index.js文件
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
// permission.js文件
import store from '@/store'
function checkPermission(el, binding) {
const { value } = binding
const roles = store.getters && store.getters.roles
if (value && value instanceof Array) {
if (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']"`)
}
}
export default {
inserted(el, binding) {
checkPermission(el, binding)
},
update(el, binding) {
checkPermission(el, binding)
}
}
在代碼中使用文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-632098.html
<template>
<!-- Admin can see this -->
<el-tag v-permission="['admin']">admin</el-tag>
<!-- Editor can see this -->
<el-tag v-permission="['editor']">editor</el-tag>
<!-- Editor can see this -->
<el-tag v-permission="['admin','editor']">Both admin or editor can see this</el-tag>
</template>
<script>
// 當(dāng)然你也可以為了方便使用，將它注冊(cè)到全局
import permission from '@/directive/permission/index.js' // 權(quán)限判斷指令
export default{
directives: { permission }
}
</script>
可以使用全局權(quán)限判斷函數(shù)，用法和指令 v-permission 類似。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-632098.html
<template>
<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane>
<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template>
<script>
import checkPermission from '@/utils/permission' // 權(quán)限判斷函數(shù)
export default{
methods: {
checkPermission
}
}
</script>
到了這里，關(guān)于前端權(quán)限驗(yàn)證之自定義指令v-permission的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
