路由守卫实战：vue-pure-admin中登录状态与页面访问控制全解析

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin

你是否曾遇到过用户未登录却能访问管理页面的安全隐患？或者登录后反复重定向的用户体验问题？本文将通过vue-pure-admin的路由系统实现，带你掌握企业级应用中路由白名单设计、权限校验与登录状态管理的完整方案，让你轻松解决90%的路由控制难题。

路由白名单基础：登录状态的第一道防线

在现代前端应用中，路由白名单（Route White List）是控制未登录用户访问范围的基础机制。vue-pure-admin将这一机制实现在src/router/index.ts中，通过明确指定无需认证即可访问的页面路径，构建应用的安全访问边界。

/** 路由白名单 */
const whiteList = ["/login"];

这行看似简单的代码定义了整个应用的访问控制基线。白名单中的路径（如登录页/login）不受登录状态限制，而其他所有页面都将经过严格的权限校验。这种设计既保证了公开页面的可访问性，又为需要保护的资源建立了安全屏障。

图：登录页面背景图，白名单中唯一允许未登录用户访问的核心页面

路由守卫实现：登录状态与权限的双重校验

vue-pure-admin采用vue-router的全局前置守卫（beforeEach）实现完整的访问控制逻辑。这个守卫就像应用的"门禁系统"，在每次页面跳转前检查用户的登录状态和访问权限，确保只有符合条件的用户才能进入特定页面。

登录状态校验流程

路由守卫的核心逻辑位于src/router/index.ts的router.beforeEach方法中，其工作流程可概括为：

具体实现代码如下：

router.beforeEach((to, _from, next) => {
  const userInfo = storageLocal().getItem<DataInfo<number>>(userKey);
  
  // 已登录用户访问白名单页面时重定向到当前页面
  function toCorrectRoute() {
    whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
  }

  if (userInfo) {
    // 已登录状态处理
    if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
      // 无权限时跳转到403页面
      next({ path: "/error/403" });
    } else {
      toCorrectRoute();
    }
  } else {
    // 未登录状态处理
    if (whiteList.indexOf(to.path) !== -1) {
      next(); // 白名单页面直接放行
    } else {
      removeToken();
      next({ path: "/login" }); // 非白名单页面重定向到登录页
    }
  }
});

这段代码实现了三重防护：白名单过滤、登录状态检查和角色权限验证，构成了应用的完整安全防线。

动态路由与权限加载

对于企业级应用，静态路由配置往往无法满足复杂的权限需求。vue-pure-admin采用"静态路由+动态路由"的混合模式，在用户登录后根据其角色动态加载对应的路由配置。

// 动态路由初始化
if (usePermissionStoreHook().wholeMenus.length === 0 && to.path !== "/login") {
  initRouter().then((router: Router) => {
    // 动态添加路由后处理标签页状态
    if (!useMultiTagsStoreHook().getMultiTagsCache) {
      // ...处理标签页逻辑
    }
    // 确保动态路由添加完成后再跳转
    if (isAllEmpty(to.name)) router.push(to.fullPath);
  });
}

这段代码位于路由守卫内部，当检测到动态路由尚未加载时，会调用initRouter方法从后端获取当前用户的路由配置，并动态添加到路由系统中。这种设计使得不同角色的用户能够看到完全不同的页面结构，实现了精细化的权限控制。

白名单优化策略：从安全到用户体验

一个设计良好的路由白名单不仅要保证系统安全，还要兼顾用户体验。vue-pure-admin在这方面提供了多种优化策略，让安全控制变得更加智能和人性化。

已登录用户的白名单处理

通常情况下，已登录用户不应该再访问登录页面。vue-pure-admin通过toCorrectRoute函数实现了这一逻辑：

function toCorrectRoute() {
  whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
}

当已登录用户尝试访问白名单中的路径（如/login）时，系统会自动将其重定向到当前页面，避免了无意义的页面跳转，提升了用户体验。

外部链接的特殊处理

应用中经常需要集成外部链接，vue-pure-admin对这类链接做了特殊处理，确保它们不会被路由系统错误拦截：

const externalLink = isUrl(to?.name as string);
if (externalLink) {
  openLink(to?.name as string); // 在新窗口打开外部链接
  NProgress.done();
} else {
  toCorrectRoute(); // 正常路由处理
}

这种设计既保证了外部资源的可访问性，又维持了路由系统的安全性和一致性。

404与403错误页面的合理配置

为了给用户提供清晰的反馈，vue-pure-admin将错误页面也纳入了路由系统：

// 无权限跳转403页面
if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
  next({ path: "/error/403" });
}

// 开启隐藏首页后访问welcome路由跳转到404页面
if (VITE_HIDE_HOME === "true" && to.fullPath === "/welcome") {
  next({ path: "/error/404" });
}

图：403错误页面示意图，当用户访问无权限页面时显示

这些错误页面不仅告知用户访问失败的原因，还提供了清晰的导航指引，帮助用户回到正确的操作流程。

最佳实践与扩展建议

基于vue-pure-admin的路由白名单实现，我们可以总结出企业级应用路由控制的最佳实践，并根据实际需求进行合理扩展。

白名单配置的最佳实践

1. 最小权限原则：只将必要的页面加入白名单，如登录页、注册页和公共帮助页面
2. 明确的命名规范：为白名单路径建立清晰的命名规则，便于维护和扩展
3. 集中管理：将白名单配置集中在一个常量中，如vue-pure-admin的whiteList数组
4. 动态扩展：对于需要临时开放的页面，可实现基于后端配置的动态白名单

高级扩展：动态白名单

对于大型应用，静态白名单可能无法满足需求。我们可以基于vue-pure-admin的现有架构，实现动态白名单功能：

// 动态获取白名单示例
async function getDynamicWhiteList() {
  try {
    const response = await api.getWhiteList();
    return response.data;
  } catch (error) {
    console.error("Failed to get dynamic white list", error);
    return whiteList; // 回退到静态白名单
  }
}

// 在路由守卫中使用
const dynamicWhiteList = await getDynamicWhiteList();
if (dynamicWhiteList.includes(to.path)) {
  next();
} else {
  // 权限校验逻辑
}

这种方式允许管理员在不修改代码的情况下调整白名单配置，极大地提高了系统的灵活性和可维护性。

性能优化：路由懒加载与缓存

随着应用规模增长，路由数量会不断增加，可能导致初始加载缓慢。vue-pure-admin通过路由懒加载和组件缓存解决了这一问题：

// 路由懒加载示例
const Login = () => import("@/views/login/index.vue");

// 组件缓存配置
if (to.meta?.keepAlive) {
  handleAliveRoute(to, "add");
  // 页面刷新时处理缓存
  if (_from.name === undefined || _from.name === "Redirect") {
    handleAliveRoute(to);
  }
}

这些优化措施确保了应用在拥有复杂路由结构的同时，仍然保持良好的性能表现。

总结与展望

路由白名单是前端应用安全的第一道防线，而vue-pure-admin提供的实现方案则展示了如何在安全与用户体验之间取得平衡。通过本文的分析，我们可以看到一个完善的路由控制体系应该包含：

• 明确的白名单定义，如const whiteList = ["/login"]
• 全面的路由守卫实现，包括登录状态和权限校验
• 智能的跳转控制，避免无意义的页面重定向
• 动态路由加载，实现基于角色的页面访问控制
• 细致的边缘情况处理，如外部链接和错误页面

随着应用复杂度的增加，我们还可以进一步扩展这些功能，如实现更细粒度的权限控制、动态白名单更新等。无论如何变化，安全与用户体验始终是路由设计的核心考量因素。

希望本文能帮助你更好地理解和应用vue-pure-admin的路由系统，构建更加安全、高效和用户友好的前端应用。如果你有任何问题或建议，欢迎在评论区留言讨论。

最后，不要忘记点赞和收藏本文，以便日后查阅！下期我们将探讨"动态路由缓存策略"，敬请期待。

【免费下载链接】vue-pure-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-pure-admin