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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让Nuxt-auth和Nuxt-i18n成为好友相关的知识,希望对你有一定的参考价值。

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

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

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

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

如何向auth模块显示要求所选语言的路由?提前致谢!

答案

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

我做了一个解决方法。我添加了auth-lang-redirect.js插件,它覆盖了redirect文件中定义的nuxt.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
}

请注意,我不使用nuxt-i18n模块,但你应该明白这一点。你必须在nuxt.config.js中注册这个插件,如下所示:

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

以上是关于如何让Nuxt-auth和Nuxt-i18n成为好友的主要内容,如果未能解决你的问题,请参考以下文章

如何在 nuxt-i18n 文本中包含链接

如何对使用 nuxt-i18n 的 Vue.js 组件进行单元测试

Nuxt.js:消息:“找不到此页面”(nuxt-i18n)

路由器使用 nuxt-i18n 推送 nuxt 中的区域设置路由

我可以在 nuxt.config.js 中访问 nuxt 上下文吗?

使用 nuxt-auth 成功认证后如何获取用户信息