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

Question

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

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

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

请注意，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是这里的重要部分）：

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 形式存储在子域的数据库中，并将其返回到客户端以获取匹配的子域，然后更新站点以匹配配置对象中的信息/选项。

这是我的 router.vue

支持这些域名：

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 请求。