自定义指令
整体思路
涉及到按钮的权限的实现思路其实大致是类似的,本例采用的是每个账号有一个authkey,在按钮加载完后判断当前账号是否在给定的权限数组中,是则显示,不是则移除
checkAuth.js
export function checkAuth(authList){
// auth是每个账号的权限标识,一般存在vuex中
let auth = store.getters['user'].auth
// 如果是admin直接放行
if(auth === 'admin')return true
else return authList.includes(auth)
}
auth.js
import {checkAuth} from 'checkAuth.js'
function install(app){
app.directive('auth', {
mounted(el, binding) {
if (!checkAuth(binding.value)) {
// 如果没有权限移除该el
el.parentNode && el.parentNode.removeChild(el)
}
}
})
}
main.js
// 全局定义自定义组件
import { auth } from 'auth.js'
const app = createApp()
app.use(auth)
页面中使用
// 因为在checkAuth方法中admin直接放行,所以这里定义可以使用的权限数组时,可以省略admin
<button v-auth='['seller', 'shop']'></button>