手写一个Vue3实现按钮权限的自定义指令

自定义指令

整体思路

涉及到按钮的权限的实现思路其实大致是类似的，本例采用的是每个账号有一个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>