之前合作很愉快的产品小姐姐走了之后, 我好难受!
权限按钮
一直负责的SaaS项目, 里面对用户进行权限管理。 之前的做法，在登陆之后对权限标志收集，通过v-permission指令判断操作按钮的显示或者隐藏。
<!-- 元素包含点击事件, 埋点, 权限管理 -->
<el-button @click="doSomething" v-track="trackUrl" v-permission="'list:delete'">删除</el-button>
const permission = {
mounted(el, binding){
const { value } = binding
const permList = store.state.permList // 权限集合
if(permList.includes(value)){
el?.parentNode?.remove(el)
}
}
}
换个玩法
我们前不久对项目新增了付费操作, 很多未付费用户会失去这些操作按钮。产品说，这妨碍我们挣用户钱了， 这些按钮虽然不可用，但是应该展示给客户看，让用户去点击，引导他们去付费！！！ 我们将这些需要付费的按钮，添加一个VIP的标志，付费情况下展示，不付费的情况下我们置灰，点击就跳广告！
如何实现
很简单嘛， 我只需要
<el-button @click="doSomething" v-track="trackUrl" v-if="hasPerm">删除(vip)</el-button>
<el-button style=" filter: grayscale(100%);" @click="advertise" v-else>删除(vip)</el-button>
可是微臣不想做啊!权限按钮少说好几十个, 工作量可太大了! 后期维护也是麻烦的很!
仔细思考一下, 这不还是对权限的管理... 试试从v-permission下手是否可以行。 在有权限的情况下, 实现很简单, 我们只需要
mounted(el, binding){
const permList = store.state.permList // 权限集合
if(!permList.includes(binding.value)){
el?.parentNode?.remove(el)
} else {
let span = document.createElement('span')
span.innerText = '(VIP)'
el?.parentNode?.appendChild(span)
}
}
没有权限的情况如何解决
- 需要移除元素的点击事件(业务操作和埋点)
- 给元素绑定单击事件, 弹框广告
- 元素置灰
其实最难的就是第一步, 我暂时没办法移除已经绑定的事件
我们通常移除事件的操作是通过removeEventListener('event', fn)
但是我们没办法获取这个fn。
但是看到一篇文章zhuanlan.zhihu.com/p/652863003, 里面讲到对于元素的克隆与复制
// 在没有权限的情况下
let cloneEl = el.cloneNode(true) // 元素复制, 不绑定点击事件
cloneEl.classList.add('noperm') // 添加无权限样式
cloneEl.addEventListener('click', () => { // 弹广告 })
el.replaceWith(cloneEl) // 替换原来的元素
这样一番操作之后, 本次需求就只需改这个指令就实现!
getEventListeners: 这个方法在控制台可以获取元素绑定的事件, 只在控制台中可用
