路由守卫不管理网络层黑白名单,而是校验路由路径或角色标识:白名单限制仅授权用户访问特定页面,黑名单拦截特定页面访问,混合策略支持角色与页面双维度动态权限控制,且必须配合服务端鉴权等安全措施。

路由守卫本身不直接管理“网站黑白名单”这类网络层访问控制,它处理的是前端应用内部的页面级权限逻辑——也就是用户能否进入某个路由页面,而不是能否访问某个外部网址。它的黑名单与白名单,本质是**路由路径或角色标识的校验规则**,不是对www.baidu.com这种域名的拦截。
白名单:只放行授权用户能访问的页面
适用于需要严格收敛入口的场景,比如后台系统中仅允许管理员查看「系统设置」页,其他角色点击即跳转403或登录页。
- 在路由元信息(meta)中声明所需权限,例如:
meta: { roles: ['admin'] }或meta: { auth: true } - 全局前置守卫(如
router.beforeEach)读取当前用户角色/权限列表,比对目标路由的meta.roles - 匹配失败时,不放行,重定向到提示页或登录页,避免页面闪现后再跳走
- 注意:白名单策略需配合后端接口权限,前端白名单仅防误点,不能替代服务端鉴权
黑名单:主动拦截特定页面的访问
适合临时下线、灰度测试或敏感功能限制,比如“财务报表页”暂不对实习生开放。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
- 可维护一个黑名单数组,例如
const BLOCKED_ROUTES = ['finance-report', 'user-export'] - 守卫中判断
to.name是否在该数组内,若命中则阻止导航,并给出明确提示 - 也可结合时间、环境变量动态控制,如
process.env.VUE_APP_ENV !== 'prod'时才允许访问调试路由 - 相比白名单,黑名单更轻量,适合小范围、临时性管控
混合策略:按角色+页面双维度动态决策
真实业务中往往既有限制(黑名单),也有特批(白名单),需组合使用。
- 定义角色能力表,例如
{ admin: ['*'], editor: ['post:list', 'post:edit'], viewer: ['post:list'] } - 每个路由配置
meta.requiredPermissions = ['post:edit'] - 守卫中解析用户权限,检查是否包含全部必需项;缺失任意一项即拒绝
- 支持通配符(
*)、前缀匹配(post:)、甚至表达式函数,提升灵活性
安全增强要点
仅靠前端守卫无法保证安全,必须配套以下措施:
- 服务端强制校验:每次关键接口调用都验证身份与权限,返回403而非数据
-
路由懒加载隔离:敏感路由组件用
import()动态引入,未授权用户无法提前加载JS文件 - 菜单动态渲染:左侧导航栏根据权限过滤,不展示无权访问的菜单项,减少试探行为
- 本地缓存清理机制:用户登出或权限变更时,清除可能残留的权限标记(如localStorage中的roles)










