Vue 路由守卫安全攻防教学文档<\/h1>

1. Vue 路由守卫基础概念<\/h2>

1.1 什么是路由守卫<\/h3>
Vue 路由守卫是 Vue Router 提供的一种导航控制机制，用于在路由跳转前后执行特定逻辑。在单页应用（SPA）中，页面跳转不会刷新浏览器，而是由 vue-router 动态替换组件。<\/p>

1.2 路由守卫的类比<\/h3>

路由守卫的功能类似于小区门口的保安，负责检查每个"访客"的通行权限：<\/p>

to<\/code>：你要去哪里？（目标路由）<\/li>
from<\/code>：你从哪里来？（来源路由）<\/li>

next<\/code>：是否放行？（控制跳转函数）<\/li>
<\/ul>
1.3 全局前置守卫示例<\/h3>
router<\/span>.beforeEach<\/span>((to<\/span>, from<\/span>, next<\/span>) => {
<\/span><\/span>  \/\/ 如果目标路由需要权限，且用户未认证
<\/span><\/span><\/span><\/span>  if<\/span> (to<\/span>.meta<\/span>.requiresAuth<\/span> &&<\/span> !<\/span>isAuthenticated<\/span>) {
<\/span><\/span>    next<\/span>('\/login'<\/span>); \/\/ 拦截，跳转到登录页
<\/span><\/span><\/span><\/span>  } else<\/span> {
<\/span><\/span>    next<\/span>(); \/\/ 放行
<\/span><\/span><\/span><\/span>  }
<\/span><\/span>});
<\/span><\/span><\/code><\/pre>2. 路由配置与认证逻辑分析<\/h2>
2.1 路由配置文件分析<\/h3>
const<\/span> router<\/span> =<\/span> createRouter<\/span>({
<\/span><\/span>  history<\/span>:<\/span> createWebHistory<\/span>(),
<\/span><\/span>  routes<\/span>:<\/span> [
<\/span><\/span>    { path<\/span>:<\/span> '\/'<\/span>, component<\/span>:<\/span> Home<\/span> },
<\/span><\/span>    { path<\/span>:<\/span> '\/login'<\/span>, component<\/span>:<\/span> Login<\/span> },
<\/span><\/span>    {
<\/span><\/span>      path<\/span>:<\/span> '\/admin'<\/span>, 
<\/span><\/span>      component<\/span>:<\/span> Admin<\/span>,
<\/span><\/span>      meta<\/span>:<\/span> { requiresAuth<\/span>:<\/span> true<\/span> } \/\/ 标记需要认证
<\/span><\/span><\/span><\/span>    }
<\/span><\/span>  ]
<\/span><\/span>});
<\/span><\/span><\/code><\/pre>2.2 认证状态管理<\/h3>
\/\/ 路由守卫实现
<\/span><\/span><\/span><\/span>router<\/span>.beforeEach<\/span>((to<\/span>, from<\/span>, next<\/span>) => {
<\/span><\/span>  const<\/span> authStore<\/span> =<\/span> useAuthStore<\/span>(); \/\/ 获取认证状态存储
<\/span><\/span><\/span><\/span>  
<\/span><\/span>  if<\/span> (to<\/span>.meta<\/span>.requiresAuth<\/span> &&<\/span> !<\/span>authStore<\/span>.isAuthenticated<\/span>) {
<\/span><\/span>    console<\/span>.warn<\/span>('⛔ Access Denied: User not authenticated.'<\/span>);
<\/span><\/span>    next<\/span>('\/login'<\/span>); \/\/ 拦截未认证访问
<\/span><\/span><\/span><\/span>  } else<\/span> {
<\/span><\/span>    next<\/span>(); \/\/ 放行
<\/span><\/span><\/span><\/span>  }
<\/span><\/span>});
<\/span><\/span><\/code><\/pre>3. 客户端安全漏洞与绕过技术<\/h2>
3.1 漏洞一：客户端状态篡改<\/h3>
漏洞原理<\/h4>

应用依赖前端内存中的状态（如 Pinia\/Vuex）判断用户认证状态<\/li>
isAuthenticated<\/code> 只是普通的 Vue ref，存储在浏览器内存中<\/li>
整个认证逻辑完全运行在客户端，用户拥有完全控制权<\/li>
<\/ul>
攻击方法<\/h4>

打开浏览器开发者工具（F12）<\/li>
在控制台中直接修改认证状态变量：<\/li>
<\/ol>
\/\/ 假设使用 Pinia 状态管理
<\/span><\/span><\/span><\/span>authStore<\/span>.isAuthenticated<\/span> =<\/span> true<\/span>;
<\/span><\/span>\/\/ 或者直接修改对应的 Vue ref 值
<\/span><\/span><\/span><\/code><\/pre>
修改后即可直接访问需要认证的路由（如 \/admin<\/code>）<\/li>
<\/ol>
漏洞根源<\/h4>
认证判断依据仅依赖于客户端内存中的变量，攻击者可以随意修改变量值。<\/p>
3.2 漏洞二：本地存储伪造<\/h3>
典型错误代码模式<\/h4>
router<\/span>.beforeEach<\/span>((to<\/span>, from<\/span>, next<\/span>) => {
<\/span><\/span>  \/\/ 错误：仅检查 localStorage 中是否存在 token
<\/span><\/span><\/span><\/span>  const<\/span> token<\/span> =<\/span> localStorage<\/span>.getItem<\/span>('userToken'<\/span>);
<\/span><\/span>  if<\/span> (to<\/span>.meta<\/span>.requiresAuth<\/span> &&<\/span> !<\/span>token<\/span>) {
<\/span><\/span>    next<\/span>('\/login'<\/span>);
<\/span><\/span>  } else<\/span> {
<\/span><\/span>    next<\/span>();
<\/span><\/span>  }
<\/span><\/span>});
<\/span><\/span><\/code><\/pre>攻击方法<\/h4>

在浏览器控制台中伪造 token：<\/li>
<\/ol>
localStorage<\/span>.setItem<\/span>('userToken'<\/span>, 'fake_token_value'<\/span>);
<\/span><\/span>\/\/ 或
<\/span><\/span><\/span><\/span>sessionStorage<\/span>.setItem<\/span>('userToken'<\/span>, 'any_fake_value'<\/span>);
<\/span><\/span><\/code><\/pre>
刷新页面或直接访问受保护路由<\/li>
<\/ol>
漏洞根源<\/h4>

仅检查本地存储中是否存在 token，未验证 token 的有效性<\/li>
未与服务器端进行真实性验证<\/li>
<\/ul>
4. 安全防护方案<\/h2>
4.1 服务端验证必不可少<\/h3>
router<\/span>.beforeEach<\/span>(async<\/span> (to<\/span>, from<\/span>, next<\/span>) => {
<\/span><\/span>  if<\/span> (to<\/span>.meta<\/span>.requiresAuth<\/span>) {
<\/span><\/span>    try<\/span> {
<\/span><\/span>      \/\/ 每次路由跳转都向服务器验证 token 有效性
<\/span><\/span><\/span><\/span>      const<\/span> response<\/span> =<\/span> await<\/span> fetch<\/span>('\/api\/verify-token'<\/span>, {
<\/span><\/span>        headers<\/span>:<\/span> { 'Authorization'<\/span>:<\/span> `Bearer <\/span>${<\/span>getToken<\/span>()}<\/span>`<\/span> }
<\/span><\/span>      });
<\/span><\/span>      
<\/span><\/span>      if<\/span> (response<\/span>.ok<\/span>) {
<\/span><\/span>        next<\/span>(); \/\/ token 有效，放行
<\/span><\/span><\/span><\/span>      } else<\/span> {
<\/span><\/span>        next<\/span>('\/login'<\/span>); \/\/ token 无效，跳转登录
<\/span><\/span><\/span><\/span>      }
<\/span><\/span>    } catch<\/span> (error<\/span>) {
<\/span><\/span>      next<\/span>('\/login'<\/span>); \/\/ 验证失败，跳转登录
<\/span><\/span><\/span><\/span>    }
<\/span><\/span>  } else<\/span> {
<\/span><\/span>    next<\/span>(); \/\/ 不需要认证的路由直接放行
<\/span><\/span><\/span><\/span>  }
<\/span><\/span>});
<\/span><\/span><\/code><\/pre>4.2 增强型路由守卫实现<\/h3>
router<\/span>.beforeEach<\/span>(async<\/span> (to<\/span>, from<\/span>, next<\/span>) => {
<\/span><\/span>  const<\/span> authStore<\/span> =<\/span> useAuthStore<\/span>();
<\/span><\/span>  
<\/span><\/span>  \/\/ 需要认证的路由
<\/span><\/span><\/span><\/span>  if<\/span> (to<\/span>.meta<\/span>.requiresAuth<\/span>) {
<\/span><\/span>    \/\/ 先检查本地状态（提升用户体验）
<\/span><\/span><\/span><\/span>    if<\/span> (authStore<\/span>.isAuthenticated<\/span>) {
<\/span><\/span>      \/\/ 本地已认证，进一步验证 token 有效性
<\/span><\/span><\/span><\/span>      try<\/span> {
<\/span><\/span>        const<\/span> isValid<\/span> =<\/span> await<\/span> authStore<\/span>.verifyToken<\/span>();
<\/span><\/span>        if<\/span> (isValid<\/span>) {
<\/span><\/span>          next<\/span>();
<\/span><\/span>        } else<\/span> {
<\/span><\/span>          authStore<\/span>.logout<\/span>();
<\/span><\/span>          next<\/span>('\/login?redirect='<\/span> +<\/span> to<\/span>.path<\/span>);
<\/span><\/span>        }
<\/span><\/span>      } catch<\/span> (error<\/span>) {
<\/span><\/span>        authStore<\/span>.logout<\/span>();
<\/span><\/span>        next<\/span>('\/login'<\/span>);
<\/span><\/span>      }
<\/span><\/span>    } else<\/span> {
<\/span><\/span>      \/\/ 本地未认证，检查是否有存储的 token
<\/span><\/span><\/span><\/span>      const<\/span> token<\/span> =<\/span> authStore<\/span>.getStoredToken<\/span>();
<\/span><\/span>      if<\/span> (token<\/span>) {
<\/span><\/span>        try<\/span> {
<\/span><\/span>          const<\/span> isValid<\/span> =<\/span> await<\/span> authStore<\/span>.verifyToken<\/span>(token<\/span>);
<\/span><\/span>          if<\/span> (isValid<\/span>) {
<\/span><\/span>            authStore<\/span>.setAuthenticated<\/span>(true<\/span>);
<\/span><\/span>            next<\/span>();
<\/span><\/span>          } else<\/span> {
<\/span><\/span>            authStore<\/span>.clearToken<\/span>();
<\/span><\/span>            next<\/span>('\/login'<\/span>);
<\/span><\/span>          }
<\/span><\/span>        } catch<\/span> (error<\/span>) {
<\/span><\/span>          authStore<\/span>.clearToken<\/span>();
<\/span><\/span>          next<\/span>('\/login'<\/span>);
<\/span><\/span>        }
<\/span><\/span>      } else<\/span> {
<\/span><\/span>        next<\/span>('\/login?redirect='<\/span> +<\/span> to<\/span>.path<\/span>);
<\/span><\/span>      }
<\/span><\/span>    }
<\/span><\/span>  } else<\/span> {
<\/span><\/span>    next<\/span>(); \/\/ 公开路由直接放行
<\/span><\/span><\/span><\/span>  }
<\/span><\/span>});
<\/span><\/span><\/code><\/pre>4.3 安全最佳实践<\/h3>
4.3.1 多层防御策略<\/h4>

客户端基础检查<\/strong>：快速验证本地状态，提升用户体验<\/li>
服务端实时验证<\/strong>：关键操作必须验证 token 有效性<\/li>
Token 自动刷新<\/strong>：实现无感知的 token 刷新机制<\/li>
敏感操作二次认证<\/strong>：重要操作需要重新输入密码<\/li>
<\/ol>
4.3.2 Token 管理策略<\/h4>
\/\/ 安全的 token 验证函数
<\/span><\/span><\/span><\/span>class<\/span> AuthService<\/span> {
<\/span><\/span>  async<\/span> verifyToken<\/span>(token<\/span>) {
<\/span><\/span>    try<\/span> {
<\/span><\/span>      const<\/span> response<\/span> =<\/span> await<\/span> fetch<\/span>('\/api\/auth\/verify'<\/span>, {
<\/span><\/span>        method<\/span>:<\/span> 'POST'<\/span>,
<\/span><\/span>        headers<\/span>:<\/span> {
<\/span><\/span>          'Content-Type'<\/span>:<\/span> 'application\/json'<\/span>,
<\/span><\/span>          'Authorization'<\/span>:<\/span> `Bearer <\/span>${<\/span>token<\/span>}<\/span>`<\/span>
<\/span><\/span>        }
<\/span><\/span>      });
<\/span><\/span>      
<\/span><\/span>      if<\/span> (!<\/span>response<\/span>.ok<\/span>) throw<\/span> new<\/span> Error('Token invalid'<\/span>);
<\/span><\/span>      
<\/span><\/span>      const<\/span> data<\/span> =<\/span> await<\/span> response<\/span>.json<\/span>();
<\/span><\/span>      return<\/span> data<\/span>.valid<\/span> &&<\/span> data<\/span>.expires<\/span> ><\/span> Date.now<\/span>();
<\/span><\/span>    } catch<\/span> (error<\/span>) {
<\/span><\/span>      return<\/span> false<\/span>;
<\/span><\/span>    }
<\/span><\/span>  }
<\/span><\/span>  
<\/span><\/span>  \/\/ Token 自动刷新
<\/span><\/span><\/span><\/span>  async<\/span> refreshToken<\/span>() {
<\/span><\/span>    const<\/span> refreshToken<\/span> =<\/span> this<\/span>.getRefreshToken<\/span>();
<\/span><\/span>    if<\/span> (!<\/span>refreshToken<\/span>) return<\/span> false<\/span>;
<\/span><\/span>    
<\/span><\/span>    try<\/span> {
<\/span><\/span>      const<\/span> response<\/span> =<\/span> await<\/span> fetch<\/span>('\/api\/auth\/refresh'<\/span>, {
<\/span><\/span>        method<\/span>:<\/span> 'POST'<\/span>,
<\/span><\/span>        headers<\/span>:<\/span> { 'Content-Type'<\/span>:<\/span> 'application\/json'<\/span> },
<\/span><\/span>        body<\/span>:<\/span> JSON<\/span>.stringify<\/span>({ refreshToken<\/span> })
<\/span><\/span>      });
<\/span><\/span>      
<\/span><\/span>      if<\/span> (response<\/span>.ok<\/span>) {
<\/span><\/span>        const<\/span> { accessToken<\/span> } =<\/span> await<\/span> response<\/span>.json<\/span>();
<\/span><\/span>        this<\/span>.setToken<\/span>(accessToken<\/span>);
<\/span><\/span>        return<\/span> true<\/span>;
<\/span><\/span>      }
<\/span><\/span>    } catch<\/span> (error<\/span>) {
<\/span><\/span>      this<\/span>.logout<\/span>();
<\/span><\/span>    }
<\/span><\/span>    return<\/span> false<\/span>;
<\/span><\/span>  }
<\/span><\/span>}
<\/span><\/span><\/code><\/pre>5. 总结<\/h2>
5.1 核心安全原则<\/h3>

永不信任客户端<\/strong>：所有安全相关的判断必须在服务端验证<\/li>
最小权限原则<\/strong>：按需授予权限，及时撤销过期权限<\/li>
深度防御<\/strong>：建立多层安全防护机制<\/li>
持续监控<\/strong>：记录和监控异常访问行为<\/li>
<\/ol>
5.2 关键实施要点<\/h3>

路由守卫只能作为用户体验优化，不能作为安全边界<\/li>
所有敏感接口必须在服务端进行权限验证<\/li>
使用 HTTPS 保护传输过程中的 token<\/li>
实现完整的登录会话管理机制<\/li>
<\/ul>
通过以上安全措施，可以有效防止客户端状态篡改和本地存储伪造等常见攻击，确保 Vue 应用的路由安全。<\/p>

Vue 路由守卫安全攻防教学文档<\/h1>

1. Vue 路由守卫基础概念<\/h2>

1.1 什么是路由守卫<\/h3> Vue 路由守卫是 Vue Router 提供的一种导航控制机制，用于在路由跳转前后执行特定逻辑。在单页应用（SPA）中，页面跳转不会刷新浏览器，而是由 vue-router 动态替换组件。<\/p>

2. 路由配置与认证逻辑分析<\/h2>

3. 客户端安全漏洞与绕过技术<\/h2>

3.1 漏洞一：客户端状态篡改<\/h3>

漏洞根源<\/h4> 认证判断依据仅依赖于客户端内存中的变量，攻击者可以随意修改变量值。<\/p>

3.2 漏洞二：本地存储伪造<\/h3>

4. 安全防护方案<\/h2>

4.3 安全最佳实践<\/h3>

5. 总结<\/h2>

1.1 什么是路由守卫<\/h3>
Vue 路由守卫是 Vue Router 提供的一种导航控制机制，用于在路由跳转前后执行特定逻辑。在单页应用（SPA）中，页面跳转不会刷新浏览器，而是由 vue-router 动态替换组件。<\/p>

漏洞根源<\/h4>
认证判断依据仅依赖于客户端内存中的变量，攻击者可以随意修改变量值。<\/p>