标准答案
- 登录态和页面访问权限一般放在路由守卫里，进入页面前判断 token、用户信息、角色或权限码。
- 按钮权限可以用自定义指令、权限组件或简单的 computed 判断，适合控制按钮、菜单、操作入口是否展示。
- 路由权限解决“能不能进页面”，按钮权限解决“页面里能不能看到或点击某操作”，二者不能互相替代。
- 前端权限不能作为安全边界，接口仍然必须由后端校验用户身份、资源归属和操作权限。
- 权限数据要有稳定模型，例如角色、权限码、资源动作关系，不能散落成大量硬编码字符串。
题目解析
权限题容易只讲 v-permission 指令，但真正的边界在路由、组件展示和接口安全之间。
前端隐藏按钮只能改善体验，不能阻止用户直接调用接口。只要涉及数据读取、修改、审批、导出，后端必须二次校验。
复杂后台通常要把权限判断封装成 composable 或 store，页面只表达业务意图，不到处拼接角色判断。
代码示例
下面的指令只适合控制展示，不应该替代后端接口鉴权。
TypeScript
app.directive('permission', {
mounted(el, binding) {
const required = binding.value
const permissions = useAuthStore().permissions
if (!permissions.includes(required)) {
el.remove()
}
}
})Vue
<template>
<button v-permission="'order:refund'">
退款
</button>
</template>常见误区
- 只在前端隐藏按钮，后端接口没有鉴权。
- 把路由权限、菜单权限、按钮权限混成一套判断，导致页面状态难以解释。
- 权限码散落在模板里，没有集中命名和复用，后续调整容易漏。