如何讓 Nuxt-auth 和 Nuxt-i18n 成為朋友

Question

我想一起使用 nuxt@auth 模塊和 nuxt-i18n。 當我想為登錄頁面設置不同的路由時，就會出現問題。 例如：

pages: {
 login: {
  en: '/authorization',
  fr: '/autorisation'
 }
}

路由運行良好，但是當我嘗試在所有頁面受限的情況下使用 nuxt@auth 時，默認重定向會要求 /login 頁面。 在 nuxt.config.js 文件中，我可以重寫重定向路由，但我只能設置一個重定向。

auth: {
 redirect: {
  login: '/fr/autorisation'
 }
}

如何向 auth 模塊顯示以詢問所選語言的路徑？ 提前致謝！

Answer 1

希望它對某人有幫助=）

export default ({ app, $auth }) => {
 $auth.onRedirect((to, from) => {
   return app.localePath(to)
  })
}

Answer 2

似乎該問題有一個解決方案https://github.com/nuxt-community/auth-module/pull/185 ，但我無法訪問當前版本中的onRedirect方法。

我做了一個解決方法。 我添加了auth-lang-redirect.js插件，它覆蓋了nuxt.config.js文件中定義的redirect選項。

export default ({ app }) => {
  var redirect = app.$auth.$storage.options.redirect
  for (var key in redirect) {
    redirect[key] = '/' + app.i18n.locale + redirect[key]
  }
  app.$auth.$storage.options.redirect = redirect
}

請注意，我沒有使用nuxt-i18n模塊，但您應該明白這一點。 你必須像這樣在nuxt.config.js注冊這個插件：

auth: {
    strategies: { ... },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/user/profile'
    },
    plugins: ['@/plugins/auth-lang-redirect.js']
  },

Answer 3

export default function({ app, $auth }) {
  const redirect = { ...$auth.$storage.options.redirect };

  const localizeRedirects = () => {
    for (const key in redirect) {
      $auth.$storage.options.redirect[key] = app.localePath(redirect[key]);
    }
  };

  localizeRedirects();

  app.i18n.onLanguageSwitched = () => {
    localizeRedirects();
  };
}