JavaScript多租户动态路由需将租户标识（子域名/路径前缀/JWT/登录返回）安全注入请求：统一通过拦截器加Tenant-ID头或封装URL拼接，路由与API共用同一全局租户状态，切换时清理缓存、重置headers并清除本地数据。
在 JavaScript（尤其是前端框架如 Vue、React 或纯 Fetch/Axios 场景）中处理多租户环境的动态路由，核心是：**把租户标识（tenantId / subdomain / path prefix）安全、一致地注入到每个接口请求中**，同时避免硬编码、保证可配置性和隔离性。
明确租户标识来源
租户信息通常来自以下几种方式，需在请求前准确获取：
-
子域名：如 tenant1.example.com → 提取
tenant1（通过window.location.hostname.split('.')[0]或更健壮的正则） -
URL 路径前缀：如 https://example.com/tenant2/api/users → 从
window.location.pathname解析首段 -
Token 或本地存储中的声明：JWT payload 含
tenant_id，或 localStorage 存有currentTenant - 登录后由后端返回并缓存：首次登录成功后将租户信息存在 context / Redux / Pinia / Context API 中
统一请求拦截器注入租户头或参数
使用 Axios 或自定义 fetch 封装，在请求发出前自动添加租户上下文：
- 推荐加
Tenant-ID请求头（标准、后端易识别）：axios.defaults.headers.common['Tenant-ID'] = currentTenantId; - 若后端要求路径级隔离（如
/t/{tenant}/users），可在请求 URL 中动态拼接：axios.get(`/t/${tenantId}/api/users`)，但建议封装成函数避免散落 - 避免在每个 API 调用处手动拼接 —— 容易遗漏、难以维护
路由与 API 的租户一致性保障
前端路由（如 Vue Router / React Router）和接口调用必须基于同一租户源，否则会出现「看到 A 租户页面，却请求了 B 租户数据」：
立即学习“Java免费学习笔记（深入）”；
- 初始化时即解析租户，并作为全局状态（例如 Pinia store 的
tenantStore.id） - 路由守卫（如
router.beforeEach）校验当前路径租户是否匹配已加载租户，不一致则重定向或报错 - API 请求函数内部直接读取该状态，而非重新解析 location —— 防止因 URL 变化未及时同步导致错乱
支持租户切换时的安全清理
用户手动切换租户（如顶部租户选择器）时，不能只改 URL 或状态，还需主动清理敏感上下文：
- 清空当前租户的缓存（如 QueryClient 的 tenant 相关 queries）
- 重置 Axios 实例的默认 headers（或创建新实例）
- 清除本地存储中租户专属数据（如
localStorage.removeItem('userPrefs_' + oldTenant)） - 触发一次「租户上下文变更」事件，通知所有依赖组件重新获取数据
