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

mus*_*tin 5 javascript authentication internationalization vue.js nuxt

我想同时使用nuxt @ auth模块和nuxt-i18n。当我希望登录页面具有不同的路由时,会出现问题。例如:

pages: {
 login: {
  en: '/authorization',
  fr: '/autorisation'
 }
}
Run Code Online (Sandbox Code Playgroud)

路由运行良好,但是当我尝试在所有页面都受限制的情况下使用nuxt @ auth时,默认重定向将请求/ login页面。在nuxt.config.js文件中,我可以重写重定向路由,但只能设置一个重定向。

auth: {
 redirect: {
  login: '/fr/autorisation'
 }
}
Run Code Online (Sandbox Code Playgroud)

如何显示给身份验证模块以询问所选语言的路线?提前致谢!

Nas*_*hGC 9

希望它对某人有帮助=)

export default ({ app, $auth }) => {
 $auth.onRedirect((to, from) => {
   return app.localePath(to)
  })
}
Run Code Online (Sandbox Code Playgroud)

  • 这是正确的解决方案。它尊重 prefix_ except_default (默认语言没有前缀)并且可以完美地处理单页行为(切换语言 -> 登录) (3认同)
  • 完美运作!只是想澄清插件必须在 auth 配置中注册,而不是使用插件属性,https://auth.nuxtjs.org/recipes/extend (3认同)
  • @Rozkalns 这是插件 (2认同)

koj*_*jot 7

似乎该问题有一个解决方案https://github.com/nuxt-community/auth-module/pull/185,但我无法访问onRedirect当前版本中的方法。

我做了一个解决方法。我添加了auth-lang-redirect.js插件,它覆盖redirectnuxt.config.js文件中定义的选项。

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
}
Run Code Online (Sandbox Code Playgroud)

请注意,我不使用nuxt-i18n模块,但您应该明白这一点。你必须nuxt.config.js像这样注册这个插件:

auth: {
    strategies: { ... },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/user/profile'
    },
    plugins: ['@/plugins/auth-lang-redirect.js']
  },
Run Code Online (Sandbox Code Playgroud)