HTML本身不支持路由权限控制，因其无运行时能力，无法读取登录态或校验Token；真正起作用的是JavaScript配合localStorage、history API及前端框架路由守卫实现的动态拦截逻辑。
HTML 本身不支持路由权限控制——它没有路由概念，也不执行 JavaScript。所谓“HTML 做路由权限控制”，实际是前端框架（如 Vue、React）或纯 JS SPA 场景中，用 localStorage、sessionStorage 或内存状态配合浏览器原生 history API 实现的导航拦截逻辑。真正在起作用的是 JS，不是 HTML。
为什么不能靠 HTML 文件或 <a></a> 标签做权限控制
直接写 <a href="/admin/users">用户管理</a> 是无效的：用户右键“在新标签页打开”，或手动输入 URL，就能绕过所有前端判断。HTML 静态文件无运行时能力，无法读取登录态、校验 Token、调用 API 或触发守卫逻辑。所有依赖 display: none、disabled 或注释掉链接的做法，都只是障眼法，对真实越权访问零防御力。
router.beforeEach 中如何检查权限（Vue Router 场景）
这是最常见且有效的入口级拦截点。关键不是“有没有权限字段”，而是检查时机和数据来源是否可信：
- 权限数据必须来自后端接口（如
/api/user/permissions），而不是硬编码在路由配置里 - 每次进入需鉴权的路由前，先确认
localStorage.getItem('auth')存在且未过期（检查expiresAt字段） - 若权限缺失或过期，
next('/login?redirect=' + to.fullPath)，并清空本地凭证 - 避免只比对角色字符串（如
role === 'admin'），应检查权限数组是否包含所需码，例如：userPermissions.includes('user:manage')
动态添加路由时 addRoute 和 addRoutes 的区别与风险
Vue Router 4+ 废弃了 addRoutes，改用 addRoute 单条注入或 createRouter({ routes: [] }) 重建实例。错误做法是把全部路由配置一次性塞进数组再调用已废弃方法，会导致：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 路由重复注册（刷新页面后 meta 丢失、守卫失效）
- 组件懒加载失败（
import()路径拼错或作用域污染） - 权限变更后无法热更新（旧路由仍可被 history.back() 触发）
正确方式是：获取后端返回的扁平化路由结构（含 path、component、meta.requiresPermission），逐条调用 router.addRoute()，并在添加完成后调用 router.replace(to.fullPath) 强制重载当前视图。
权限更新后多标签页不同步的典型表现
用户在一个标签页退出登录或被踢下线，其他标签页仍显示“已登录”状态，点击按钮报 401，菜单未隐藏——这是因为 localStorage 变更不会自动广播到同源其他窗口。必须显式监听：
- 在主应用入口注册
window.addEventListener('storage', handler) -
handler中检查event.key === 'auth'且event.newValue === null，然后跳转登录页 - 注意：该事件在触发页自身不会触发，仅通知其他同源页；且 Safari 私密模式下可能完全不触发
真正难处理的不是“怎么加权限”，而是“权限失效后 UI 状态怎么瞬间归位”——这要求所有权限判断点（路由守卫、指令、组件 computed、按钮 v-if）都依赖同一个响应式源，比如 Vuex/Pinia store 中的 userPermissions，而不是各自去读 localStorage。
