vue項目實現(xiàn)不同用戶角色權限管控：
第一種方式：自定義指令實現(xiàn)用戶角色權限控制v-permission：
實現(xiàn)方法：Vue.directive+install+Vue.use
步驟：1. 新建permission.js 實現(xiàn)自定義指令的鉤子方法：
import store from '@/store'
export default {
inserted(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(`使用方式： v-permission="['admin','editor']"`)
}
}
}
- 新建index.js 將permission轉為install：
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
- 在main.js中用use方法使用permission：
// 權限指令
import permission from './components/Permission'
Vue.use(permission)
- 在模板中使用v-permission控制訪問權限:
<el-button
slot="left"
v-permission="['admin', 'storage:add']"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-upload"
@click="mainadd = true"
>添加</el-button
>
第二種方式：Vue.prototype+install+v-if實現(xiàn)用戶角色權限控制：
- 新建permission.js，將checkPer方法注冊到Vue.prototype，并注冊為install方法：
import store from '@/store'
/**
* @param {Array} value
* @returns {Boolean}
* @example see @/views/permission/directive.vue
*/
export default {
install(Vue) {
Vue.prototype.checkPer = (value) => {
if (value && value instanceof Array && value.length > 0) {
const roles = store.getters && store.getters.roles
const permissionRoles = value
return roles.some(role => {
return permissionRoles.includes(role)
})
} else {
console.error(`need roles! Like v-permission="['admin','editor']"`)
return false
}
}
}
}
- 在main.js中引入permission, 并用use方法:
// 權限指令
import checkPer from '@/utils/permission'
Vue.use(checkPer)
- 使用：配合 v-if 在模板中實現(xiàn)權限控制：
<el-table-column v-if="checkPer(['admin','app:edit','app:del'])" label="操作" width="150px" align="center">
