新建 role.js 文件
import Vue from 'vue'; // 获取用户角色, 可以从cookie中获取 function getRole() { return ['admin'] } // 校验用户权限，传入一个数组 function authority(role) { return getRole().includes(role[0]) // return role.includes(getRole()) } // 注册一个全局自定义指令 `v-role` Vue.directive('role', { inserted: (el, binding, vnode) => { // 如果没有权限就移除此节点 if (!authority(binding.value)) { el.parentNode.removeChild(el); } } }) export default authority
在main.js 引入role文件
import role from ‘./utils/role.js’
Vue.use(role )
<template> <div> <div v-role="['user', 'admin', 'superAdmin']">user</div> <div v-role="['admin', 'superAdmin']">admin</div> <div v-role="['superAdmin']">superAdmin</div> </div> </template>
当 v-role="[‘user’, ‘admin’, ‘superAdmin’]" 时
在getRole 函数有对应的 admin 匹配 ， 则当前的线索
喜欢的可以关注 前段面试题小程序， MST题库 ，大量面试题免费看
WX搜索 【MST题库】小程序查看
