如何在nuxt.js.js中获取当前的locale并将其添加到header axios

2lpgd968  于 2023-11-18  发布在  iOS
关注(0)|答案(1)|浏览(196)

使用NuxtJS,如何在axios头中输出用户选择的locale?这样当向后端请求时,带有所选locale的'Accept-Language'头会被传输。
nuxt.config.js

...
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    '@nuxtjs/i18n',
  ],

  i18n: {
    nuxtI18nHead: true,
    strategy: 'prefix_except_default',
    defaultLocale: "en",    
    locales: [
      {
        code: 'de',
        ico: 'de-DE',
        file: 'de-DE.json'
      },
      {
        code: 'ru',
        ico: 'ru-RU',
        file: 'ru-RU.json'
      },
      {
        code: 'en',
        ico: 'en-US',
        file: 'en-US.json'
      },
    ],
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: "i18n_redirected",
      alwaysRedirect: false,
      fallbackLocale: "en",
      redirectOn: 'root',
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'http://127.0.0.1:8000',
    headers: {
      common: {
        'Accept-Language': 'en' /// Получить тут выбранную локаль
      },      
    }
  },

字符串

xvw2m8pv

xvw2m8pv1#

我只找到了中间件的解决方案。也许你可以用它来拦截axios的调用。
这也是Nuxt github中提出的一个问题,Nuxt团队通过以下方式解决了这个问题:

// middleware/something.ts
export default defineNuxtRouteMiddleware(() => {
const { $i18n } = useNuxtApp();
const locale = $i18n.locale;
// ...

字符串
答案来源:https://github.com/nuxt-modules/i18n/issues/2146

相关问题