如何让 Nuxt-auth 和 Nuxt-i18n 成为朋友

Question

I want to use nuxt@auth module and nuxt-i18n together. The problem appears when I want to have different routes for login page. For example:

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

Routes are working well, but when I try to use nuxt@auth with all page restricted, the default redirect asks for /login page. In nuxt.config.js file I can rewrite redirect route, but I can set only one redirect.

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

How can I show to auth module to ask for route of selected language? Thanks in advance!

Answer 1

Hope it'll be helpful for somebody =)

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

Answer 2

It seems that there was a solution for that problem https://github.com/nuxt-community/auth-module/pull/185 , but I can't access to onRedirect method in the current release.

I did a workaround. I added auth-lang-redirect.js plugin, which overrides redirect option defined in the nuxt.config.js file.

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
}

Notice that I don't use nuxt-i18n module, but you should get the point. You have to register this plugin in nuxt.config.js like this:

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();
  };
}