实现思路

1. 给每个需要权限控制的按钮一个唯一标识
2. 登录时从后端获取该用户所有有权限的按钮集合
3. 如果该按钮标识在集合中，展示该元素，反之隐藏

用v-if实现

const authList = ['1', '2', '3', '4']; //权限列表，应该取自后台返回的数据

//判断按钮是否有权限
checkBtnAuth(key) {
    const index = authList.indexOf(key);
    if (index > -1) {
        return true; // 有权限
    } else {
        return false; // 无权限
    }
}

html部分 两个按钮的唯一标识分别为‘1’ ‘a’

<div class="btns">
    <button v-if="checkBtnAuth('1')">按钮1</button>
    <button v-if="checkBtnAuth('a')">按钮2</button>
</div>

此时按钮1展示、按钮2隐藏

更优雅的写法——自定义指令

main.js中定义自定义指令

//自定义指令
import { checkBtnAuth } from '@/utils/btn-authority';  //引入checkBtnAuth方法（方法内容和上文一致）
Vue.directive('permission', { // 指令名->permission
    inserted(el, binding) { // 指令定义对象钩子函数->被绑定元素插入父节点时调用
     	/** el为绑定的元素，可以对其进行dom操作 binding为一个对象
	     	binding：一个对象，包含以下属性：
			name：指令名，不包括 v- 前缀。
			value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
			oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
			expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
			arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
			modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
			vnode： Vue编译生成的虚拟节点。移步 VNode API 来了解更多详情。
			oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
		**/
        const permission = binding.value; // 获取到 v-permission的值
        if (permission) {
            const hasPermission = checkBtnAuth(permission);
            if (!hasPermission) { // 没有权限 移除Dom元素
                el.parentNode && el.parentNode.removeChild(el);
            }
        }
    }
});

html部分 两个按钮的唯一标识分别为‘1’ ‘a’

<div class="btns">
    <button v-permission="1">按钮1</button>
    <button v-permission="a">按钮2</button>
</div>

此时按钮1展示、按钮2隐藏

ps.该方法也可用于页面其他元素的动态展示