跳转到正文
skillsafebeta
← 报告库
用途分类 / 其他用途

Vue Router Best Practices Skill 安全审计

作者说它能做什么（原文）

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

第三方安全检查结论

先别安装或运行

已检查文件
11
发现的风险
1
会不会运行危险命令？检查是否下载程序后直接运行、让他人远程控制电脑，或藏起要运行的命令。未发现风险
会不会泄露文件和密钥？检查是否发送含密码或密钥的文件，以及代码里是否直接写了密钥。未发现风险
会不会删除文件或一直在后台运行？检查是否大范围删除文件、改写磁盘，或设置自动启动。未发现风险
会不会绕过安全保护？检查是否跳过网站安全验证、开放过多文件权限，或取消操作前的确认。发现 1 项风险
高风险

受保护路由的示例在认证超时或网络错误时放行

原文依据：3 处
发现了什么

指南把超时模式标为“CORRECT”，但认证检查超时后只记录警告，不返回拒绝或重定向；另一个错误处理示例在 NETWORK_ERROR 时明确返回 true。Vue Router 中 true 允许导航。

为什么需要注意

如果用户把这些模式用于 requiresAuth 路由，网络故障或故意造成的超时会绕过前端认证门槛。若页面或后端接口也错误地依赖该门槛，未认证者可能看到受限界面或数据。

该候选有源码支持，但这是教学示例而非会自行执行的实现。指南将超时写法标为“CORRECT”，认证检查超时后仅警告且未返回拒绝；该守卫随后会默认放行。另一示例在网络错误时明确返回 true。若用户把这些模式用于受保护路由，认证服务故障可能导致客户端导航继续。客户端路由守卫本身也不应替代服务端授权。用户可要求作者将认证失败、超时和网络错误默认设为拒绝或跳转登录，并明确说明服务端必须独立校验权限。

reference/router-guard-async-await-pattern.md:141来自说明文档打开原文件
router.beforeEach(async (to, from) => {  if (to.meta.requiresAuth) {    try {      const isValid = await withTimeout(checkAuth(), 5000)      if (!isValid) {        return '/login'      }    } catch (error) {      if (error.message === 'Request timeout') {        // Let user through but show warning        console.warn('Auth check timed out')      } else {        return '/login'      }    }  }})```
查看另外 2 个位置
reference/router-guard-async-await-pattern.md:204来自说明文档打开原文件
    if (error.code === 'NETWORK_ERROR') {      // Offline - maybe allow navigation but show warning      return true    }
reference/router-guard-async-await-pattern.md:218来自说明文档打开原文件
1. **Always await async operations** - Otherwise navigation proceeds immediately2. **Return values matter** - Return route to redirect, false to cancel, true/undefined to proceed3. **Handle all error cases** - Uncaught errors can hang navigation4. **Add timeouts** - Slow APIs shouldn't block navigation indefinitely5. **Show loading state** - Users need feedback during async checks
会不会误导 AI 或隐藏内容？检查工作说明是否要求 AI 忽略你的指令、干扰检查结果，或夹带看不见的文字。未发现风险
会不会偷偷改推广链接或收款方？检查是否强制替换推广链接或收款对象，同时要求隐瞒更改。未发现风险

Skill 逻辑拆解

3 个说明模块

该 Skill 是一个纯文档型 Vue Router 指南；入口文件把导航守卫、路由生命周期和生产环境设置分派到八个参考文档。所提供源码中没有安装命令或可执行脚本。

查看原文
SKILL.md:9来自说明文档打开原文件
Vue Router best practices, common gotchas, and navigation patterns.### Navigation Guards- Navigating between same route with different params → See [router-beforeenter-no-param-trigger](reference/router-beforeenter-no-param-trigger.md)- Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference/router-beforerouteenter-no-this.md)- Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference/router-guard-async-await-pattern.md)- Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference/router-navigation-guard-infinite-loop.md)- Navigation guard using deprecated next() function → See [router-navigation-guard-next-deprecated](reference/router-navigation-guard-next-deprecated.md)
SKILL.md:18来自说明文档打开原文件
### Route Lifecycle- Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference/router-param-change-no-lifecycle.md)- Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference/router-simple-routing-cleanup.md)### Setup- Building production single-page application → See [router-use-vue-router-for-production](reference/router-use-vue-router-for-production.md)

指南建议用全局或组件内守卫检查由路由参数指定的订单访问权，并特别提醒同一路由参数变化不会触发 beforeEnter。

查看原文
reference/router-beforeenter-no-param-trigger.md:40来自说明文档打开原文件
**Scenario:**1. User navigates from `/products` to `/orders/1` - beforeEnter runs, access checked2. User navigates from `/orders/1` to `/orders/2` - beforeEnter DOES NOT run!3. User might access order they don't have permission for!
reference/router-beforeenter-no-param-trigger.md:78来自说明文档打开原文件
// router.jsrouter.beforeEach(async (to, from) => {  // Handle all order access checks globally  if (to.name === 'OrderDetail') {    // This runs on EVERY navigation to this route, including param changes    const order = await checkOrderAccess(to.params.id)    if (!order.canView) {      return '/unauthorized'    }  }})```

指南也说明同一路由不同参数会复用组件，可能短暂或持续显示上一参数对应的数据，并建议监听参数或使用 onBeforeRouteUpdate。

查看原文
reference/router-param-change-no-lifecycle.md:46来自说明文档打开原文件
**Scenario:**1. Visit `/users/1` - Component mounts, fetches User 1 data2. Navigate to `/users/2` - Component is REUSED, onMounted doesn't run3. UI still shows User 1's data!
reference/router-param-change-no-lifecycle.md:62来自说明文档打开原文件
// Watch for param changes - handles both initial load and navigationwatch(  () => route.params.id,  async (newId) => {    loading.value = true    user.value = await fetchUser(newId)    loading.value = false  },  { immediate: true }  // Run immediately for initial load)</script>
从这里开始 · 工作说明SKILL.md
vue-router-best-practices
连线表示工作说明包含的模块，不是实际运行顺序。点击模块可查看原文。

文件引用关系图

8 处引用
哪些文件发起引用引用了什么
连线表示真实的文件引用，不是运行顺序。点击节点可高亮相关连线，并查看具体文件和原文位置。虚线表示还有文件需要定位。
文件与检查记录11 个文件

检查范围与遗漏

逐文件查看涉及的内容

下方列出本次涉及的原文范围；纳入检查不代表已查清所有问题。

  • SKILL.md已纳入全文
  • reference/router-beforeenter-no-param-trigger.md已纳入全文
  • reference/router-beforerouteenter-no-this.md已纳入全文
  • reference/router-guard-async-await-pattern.md已纳入全文
  • reference/router-navigation-guard-infinite-loop.md已纳入全文
  • reference/router-navigation-guard-next-deprecated.md已纳入全文
  • reference/router-param-change-no-lifecycle.md已纳入全文
  • reference/router-simple-routing-cleanup.md已纳入全文
  • reference/router-use-vue-router-for-production.md已纳入全文
  • LICENSE.md已纳入全文
  • SYNC.md已纳入全文

这份报告只针对上方版本。我们看了拿到的代码和说明文件，没有实际运行 Skill，也没有检查它另外安装的软件包。因此，这不是“保证安全”的承诺；换了版本或使用环境，结果也可能不同。

  • LICENSE.md许可说明
  • SKILL.md工作说明
  • SYNC.md配套文件
  • reference/router-beforeenter-no-param-trigger.md配套文件
  • reference/router-beforerouteenter-no-this.md配套文件
  • reference/router-guard-async-await-pattern.md配套文件
  • reference/router-navigation-guard-infinite-loop.md配套文件
  • reference/router-navigation-guard-next-deprecated.md配套文件
  • reference/router-param-change-no-lifecycle.md配套文件
  • reference/router-simple-routing-cleanup.md配套文件
  • reference/router-use-vue-router-for-production.md配套文件

代码和说明中提到的操作

连接外部网站
reference/router-beforeenter-no-param-trigger.md:166来自说明文档打开原文件
## Reference- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)- [Vue Router Per-Route Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard)
reference/router-beforeenter-no-param-trigger.md:167来自说明文档打开原文件
- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)- [Vue Router Per-Route Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard)
reference/router-beforerouteenter-no-this.md:175来自说明文档打开原文件
## Reference- [Vue Router In-Component Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)- [Vue Router Navigation Resolution Flow](https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow)
读取了多少行
1,540
文件校验值（用于核对版本）
bc1db2bada3594b954b6233065f1d7684683726ac5727f4534f79dcfe70e3df5