Rails后端+Vue3前端架构下如何处理子域名问题？

一、双路由实例方案的可行性 #

这个方案是可行的，但扩展性不足——后续支持二级子域名（client.subdomain.example.com）时，判断逻辑会嵌套得越来越复杂，维护成本直线上升；如果之后新增更多子域名场景（比如内部管理域名），路由实例数量也会跟着增加，代码会变得臃肿杂乱。

二、更优的子域名处理方案 #

推荐单路由实例 + 全局路由守卫 + 子域名解析工具的组合，具体实现步骤如下：

1. 封装子域名解析工具 #

写一个通用函数，统一处理不同层级的子域名解析：

// utils/subdomain.js
export function parseSubdomain(host) {
  const parts = host.split('.');
  // 处理根域名/WWW域名（example.com、www.example.com）
  if (parts.length <= 2 || parts[parts.length - 2] === 'example') {
    return { type: 'root', tenant: null };
  }
  // 处理一级租户子域名（subdomain.example.com）
  if (parts.length === 3) {
    return { type: 'tenant', tenant: parts[0] };
  }
  // 处理二级自定义子域名（client.subdomain.example.com）
  if (parts.length >= 4) {
    // 可根据业务调整，这里取倒数第三段作为租户标识
    return { 
      type: 'custom-tenant', 
      tenant: parts[parts.length - 3], 
      customDomain: parts.slice(0, parts.length - 3).join('.') 
    };
  }
}

2. 全局路由守卫做分流 #

在Vue路由的beforeEach守卫中，根据解析结果控制路由访问权限：

// router/index.js
import { parseSubdomain } from '@/utils/subdomain';
import router from './router';
import store from '@/store';
import api from '@/api';

router.beforeEach((to, from, next) => {
  const subdomainInfo = parseSubdomain(window.location.host);
  
  // 根域名/WWW：仅允许访问落地页、博客类路由
  if (subdomainInfo.type === 'root') {
    if (to.meta.requiresTenant) {
      next({ name: 'LandingPage' });
    } else {
      next();
    }
  } 
  // 租户子域名：验证租户合法性，仅允许访问租户专属路由
  else if (subdomainInfo.type === 'tenant' || subdomainInfo.type === 'custom-tenant') {
    api.checkTenant(subdomainInfo.tenant).then(res => {
      if (res.valid) {
        store.commit('setTenant', subdomainInfo);
        if (!to.meta.requiresTenant) {
          next({ name: 'TenantDashboard' });
        } else {
          next();
        }
      } else {
        next({ name: 'NotFound' });
      }
    }).catch(() => {
      next({ name: 'NotFound' });
    });
  }
});

3. 用路由元信息标记路由归属 #

给路由添加meta字段，区分根域名路由和租户专属路由：

const routes = [
  // 根域名路由
  {
    path: '/',
    name: 'LandingPage',
    component: () => import('../views/LandingPage.vue'),
    meta: { requiresTenant: false }
  },
  {
    path: '/blog',
    name: 'Blog',
    component: () => import('../views/Blog.vue'),
    meta: { requiresTenant: false }
  },
  // 租户专属路由
  {
    path: '/dashboard',
    name: 'TenantDashboard',
    component: () => import('../views/tenant/Dashboard.vue'),
    meta: { requiresTenant: true }
  }
];

4. 后端统一处理租户验证 #

Rails API层在ApplicationController中添加前置钩子，统一验证租户合法性：

# app/controllers/application_controller.rb
before_action :validate_tenant

private

def validate_tenant
  subdomain = request.subdomains.first
  # 处理二级子域名场景，提取租户标识
  if request.subdomains.length >= 2
    subdomain = request.subdomains[-2]
  end
  @current_tenant = Tenant.find_by(subdomain: subdomain) unless subdomain.in?(['www', nil])
  unless @current_tenant || subdomain.in?(['www', nil])
    render json: { error: 'Invalid tenant' }, status: :unauthorized
  end
end

三、是否要回归Rails单体？ #

完全没必要。拆分前后端的架构更适合SaaS长期发展：

• 前端可独立迭代优化用户体验，不受Rails视图层限制；
• 后端API可服务多端（Web、移动端、小程序），扩展性更强；
• 多租户核心逻辑（租户验证、数据隔离）可在后端统一处理，前端仅需做路由分流，复杂度可控。

只需注意：前后端要约定好子域名解析规则，保持逻辑一致，避免出现解析不一致的问题。

内容的提问来源于stack exchange，提问作者Bahl