Vue中用v-permission指令实现按钮级权限控制：通过binding.value获取权限码，从sessionStorage读取解析后的权限数组，比对后无权限则el.parentNode&&el.parentNode.removeChild(el)安全移除DOM节点。
按钮权限控制不能只靠前端隐藏，必须后端校验兜底；但前端做按钮级控制能显著提升体验和界面整洁度。核心是：用权限标识匹配按钮行为，再结合 disabled 或 DOM 移除来响应状态。
如何用 Vue 指令实现 v-permission 控制按钮显隐
直接操作 DOM 节点比单纯改 disabled 更彻底，避免用户右键“检查元素”后手动删掉 disabled 属性绕过限制。
- 定义指令时注意：
el.parentNode.removeChild(el)前要判空，否则el.parentNode可能为null - 权限数据建议从
sessionStorage读取（比localStorage更安全，页面关闭即失效），且需 JSON 解析后遍历比对 - 不要在
bind钩子中直接写死权限字符串，应通过binding.value接收，比如v-permission="'btn:delete'" - 示例片段：
Vue.directive('permission', {<br> bind(el, binding) {<br> const perms = JSON.parse(sessionStorage.getItem('buttonPerms') || '[]');<br> if (!perms.some(p => p.code === binding.value)) {<br> el.parentNode && el.parentNode.removeChild(el);<br> }<br> }<br>});
React 中用 useAuth hook 控制按钮 disabled 状态
比起完全移除按钮，禁用更轻量，适合“有权限但当前不可操作”的场景（如列表为空时禁用删除）。
-
useAuth应返回布尔值，内部调用authService.hasPermission('btn:export')，而不是透传原始数据 - 务必在组件卸载后取消副作用，避免
setStateon unmounted component 报错 - 不要把权限判断逻辑写在 JSX 内联表达式里（如
{auth('btn:edit') ? <button></button> : null}），易导致重复计算，应提前解构 - 示例：
const canEdit = useAuth('btn:edit');<br>return <button disabled={!canEdit}>编辑</button>;
纯 HTML/JS 场景下如何安全启用禁用按钮
没有框架时，最容易出错的是事件绑定时机和空值判断——DOM 未就绪就操作 getElementById 会返回 null，后续报错中断脚本。
立即学习“前端免费学习笔记（深入）”；
- 必须用
input事件监听输入变化，而非keyup：前者覆盖粘贴、自动填充、剪切等所有修改路径 - 每次更新前加保护：
if (!btn || !input) return;，防止因 ID 错误或元素缺失导致整个逻辑崩掉 -
disabled是布尔属性，设为false才是启用，设为''或undefined仍会被视为 true（禁用） - 推荐初始化逻辑：
document.addEventListener('DOMContentLoaded', () => {<br> const btn = document.getElementById('submitBtn');<br> const input = document.getElementById('email');<br> if (!btn || !input) return;<br> const update = () => btn.disabled = !input.value.trim();<br> input.addEventListener('input', update);<br> update(); // 页面加载后立即同步一次<br>});
真正容易被忽略的不是怎么写权限判断，而是权限数据的时效性——用户在别处修改了角色，当前页没刷新，sessionStorage 里的权限就已过期。需要设计一个轻量的权限同步机制，比如监听自定义事件或轮询变更通知，否则按钮状态可能长期与真实权限脱节。
