vue实现动态租户入口

Vue 实现动态租户入口方案

动态租户入口通常用于 SaaS 或多租户系统，允许用户通过不同域名或路径访问各自独立的租户环境。以下是基于 Vue 的实现方案：

路由动态配置

通过 Vue Router 实现动态路由匹配，根据租户标识加载不同模块：

// router.js
const router = new VueRouter({
  routes: [
    {
      path: '/:tenantId',
      component: TenantLayout,
      children: [
        {
          path: 'dashboard',
          component: () => import('./views/TenantDashboard.vue')
        }
      ]
    }
  ]
})

全局租户状态管理

使用 Vuex 或 Pinia 管理租户信息：

// store/tenant.js
export const useTenantStore = defineStore('tenant', {
  state: () => ({
    currentTenant: null,
    tenants: []
  }),
  actions: {
    async fetchTenants() {
      this.tenants = await api.getTenants()
    },
    setTenant(tenantId) {
      this.currentTenant = this.tenants.find(t => t.id === tenantId)
    }
  }
})

动态主题切换

根据租户配置加载不同的主题样式：

// utils/theme.js
export function loadTenantTheme(tenantId) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = `/themes/${tenantId}.css`
  document.head.appendChild(link)
}

入口组件处理

创建租户入口组件处理初始化逻辑：

<!-- TenantEntry.vue -->
<template>
  <router-view v-if="initialized"/>
</template>

<script>
import { useTenantStore } from '@/stores/tenant'

export default {
  data() {
    return {
      initialized: false
    }
  },
  async created() {
    const tenantId = this.$route.params.tenantId
    await useTenantStore().setTenant(tenantId)
    loadTenantTheme(tenantId)
    this.initialized = true
  }
}
</script>

API 请求拦截

在 axios 拦截器中自动添加租户头信息：

// api/interceptors.js
axios.interceptors.request.use(config => {
  const tenantId = store.state.tenant.currentTenant?.id
  if (tenantId) {
    config.headers['X-Tenant-ID'] = tenantId
  }
  return config
})

多域名支持配置

对于跨域名的租户访问，可通过动态 publicPath 实现：

// vue.config.js
module.exports = {
  publicPath: process.env.VUE_APP_TENANT_ID 
    ? `https://${process.env.VUE_APP_TENANT_ID}.domain.com`
    : '/'
}

租户切换处理

实现租户切换的逻辑：

// utils/tenantSwitch.js
export function switchTenant(newTenantId) {
  const currentPath = route.path.replace(/^\/[^/]+/, '')
  router.push(`/${newTenantId}${currentPath}`)
  location.reload() // 确保资源重新加载
}

动态组件加载

按需加载租户特定的组件：

// components/TenantComponent.js
export default {
  components: {
    TenantSpecific: () => import(
      /* webpackChunkName: "tenant-[request]" */ 
      `@/components/tenants/${tenantId}/SpecialComponent.vue`
    )
  }
}

实现时需考虑缓存策略、错误处理和权限验证等边界情况。部署阶段需要配合后端服务进行租户识别和资源配置。