节点服务器和 Nuxt/Vue 客户端之间的通配符子域信息共享

Question

我们正在构建一个multi_tenant解决方案，后端使用NodeJS/Express，前端使用VueJS/Nuxt。每个租户都将获得自己的子域，如 x.mysite.com、y.mysite.com 等。

如何让我们的后端和前端都读取子域名并相互共享？

我有一些理解，在 Vue 客户端中，我们可以使用 window.location 读取 suvdomain。但我认为为时已晚。有没有更好的方法？那么节点/快速设置呢？我们如何在那里获得苏维德洪信息？

请注意，Node/Express 服务器主要是一个用于与数据库接口和进行身份验证的 API。

感谢任何帮助我们走上正确道路的帮助或见解。

Answer 1

我正在我的应用程序中做类似的事情。我的解决方案看起来像这样...

前端：在router.vue中，我检查子域以查看使用window.location.host返回的路由。有3个选项

1. 没有子域加载原始路由 (mysite.com(
门户
2. 子域加载门户路由 (portal.mysite.com(
任何其他子域
3. 加载自定义客户端子域的路由，该子域可以是任何内容并且是动态的

我的情况 #3 的路线如下所示：

import HostedSiteHomePage from 'pages/hostedsite/hosted-site-home'
export const hostedSiteRoutes = [
{ path: '*', component: HostedSiteHomePage }
]

星号表示任何不匹配的路由都将回退到它。

在您的回退页面(或任何页面(中，您将需要这个(在挂载之前是这里的重要部分(：

beforeMount: function () {
var host = window.location.host
this.subdomain = host.split('.')[0]
if (this.subdomain === 'www') subdomain = host.split('.')[1]
this.fetchSiteContent()
},
methods: {
fetchSiteContent() {
if (!this.subdomain || this.subdomain === 'www') {
this.siteContentLoaded = true
this.errorLoadingSite = true
return
}
// send subdomain to the server and get back configuration object
http.get('/Site/LoadSite', { params: { site: this.subdomain } }).then((result) => {
if (result && result.data && result.data.success == true) {
this.siteContent = result.data.content
} else {
this.errorLoadingSite = true
}
this.siteContentLoaded = true
}).catch((err) => {
console.log("Error loading " + this.subdomain + "'s site", err)
this.errorLoadingSite = true
this.siteContentLoaded = false
})
},
}

我将 json 格式的配置对象存储在子域的数据库中，并将其返回到客户端以获取匹配的子域，然后更新站点以匹配配置对象中的信息/选项。

这是我的路由器。

支持以下域名：

mysite.com (loads main/home routes)
portal.mysite.com (loads routes specific to the portal)
x.mysite.com (loads routes that support dynamic subdomain, fetches config from server)
y.mysite.com (loads routes that support dynamic subdomain, fetches config from server)
localhost:5000 (loads main/home routes)
portal.localhost:5000 (loads routes specific to the portal)
x.localhost:5000 (loads routes that support dynamic subdomain, fetches config from server)
y.localhost:5000 (loads routes that support dynamic subdomain, fetches config from server)

import Vue from 'vue'
import VueRouter from 'vue-router'
// 3 different routes objects in routes.vue
import { portalRoutes, homeRoutes, hostedSiteRoutes } from './routes'
Vue.use(VueRouter);
function getRoutes() {
let routes;
var host = window.location.host
var subdomain = host.split('.')[0]
if (subdomain === 'www') subdomain = host.split('.')[1]
console.log("Subdomain: ", subdomain)
// check for localhost to work in dev environment
// another viable alternative is to override /etc/hosts
if (subdomain === 'mysite' || subdomain.includes('localhost')) {
routes = homeRoutes
} else if (subdomain === 'portal') {
routes = portalRoutes
} else {
routes = hostedSiteRoutes
}
return routes;
}
let router = new VueRouter({
mode: 'history',
routes: getRoutes()
})
export default router

如您所见，我有 3 组不同的路由，其中一组是一组支持动态子域的路由。一旦我加载动态子域页面并获取一个配置对象，我就会向服务器发送一个 GET 请求，该对象告诉前端该站点应该是什么样子。