如何在中间件中获取域，然后在 axios 调用 [Nuxt] 之前将其传递给 components/store

Question

我想在进行任何 axios 调用之前访问域名。因为 axios 调用需要域 URL 才能进行。

所以，我想先获取域，然后将其传递给 store/components，以便它们可以正确加载。

我的理解是域保存在传递给中间件的上下文的 req 对象中。

我如何获取它然后将其传递给商店和组件？

Answer 1

你可以这样做。使用 nuxtServerInit。此函数在服务器端调用，并且仅在您重新加载页面时调用一次。为此，您需要前往您的商店并添加：

//商店

actions: {
   nuxtServerInit(store, context){
      store.commit("setUrl", context.req.originalUrl);
   }
}

好吧，就是这样。人们也喜欢解构论点：

actions: {
   nuxtServerInit({ commit},{req}){
      commit("setUrl", req.originalUrl);
   } 
}

我不确定它是 originalUrl 还是只是 url... 或者可能有些不同。

Answer 2

要扩展 lfaruki 的答案，您可以这样做。这是我的解决方案：

store/index.js

export const state = () => ({
    domain: '',
});

export const mutations = {
    setDomain(state, domain) {
        state.domain = domain;
    },
};

export const actions = {
    nuxtServerInit(store, context) {
        store.commit('setDomain', context.req.headers.host);
    },
};

export const getters = {
    domain: (state) => state.domain,
};

middleware/domain.js

export default function ({ route, store, redirect }) {
    console.log('hey look at that', store.getters['domain']);
}

nuxt.config.js

export default {
    ...

    router: {
        middleware: 'domain'
    },
}

如何在中间件中获取域，然后在 axios 调用 [Nuxt] 之前将其传递给 components/store

How to get domain in middleware, then pass it to components/store before axios calls [Nuxt]

middleware

node.js

vue.js

nuxt.js