如何让 Nuxt-auth 和 Nuxt-i18n 成为朋友
Posted
技术标签:
【中文标题】如何让 Nuxt-auth 和 Nuxt-i18n 成为朋友【英文标题】:How to make Nuxt-auth and Nuxt-i18n to be friends 【发布时间】:2019-02-21 04:25:08 【问题描述】:我想同时使用 nuxt@auth 模块和 nuxt-i18n。当我想为登录页面设置不同的路由时,就会出现问题。例如:
pages:
login:
en: '/authorization',
fr: '/autorisation'
路由运行良好,但是当我尝试在所有页面受限的情况下使用 nuxt@auth 时,默认重定向会要求 /login 页面。在 nuxt.config.js 文件中我可以重写重定向路由,但我只能设置一个重定向。
auth:
redirect:
login: '/fr/autorisation'
如何向身份验证模块显示以询问所选语言的路线?提前致谢!
【问题讨论】:
【参考方案1】: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']
,
【讨论】:
谢谢,我已经解决了这个问题,我的解决方法是没有 for,但做同样的事情。【参考方案2】:希望对某人有所帮助 =)
export default ( app, $auth ) =>
$auth.onRedirect((to, from) =>
return app.localePath(to)
)
【讨论】:
这是正确的解决方案。它尊重 prefix_except_default (默认语言没有前缀),并且可以完美地与单页行为(切换语言 -> 登录) 这是插件还是中间件? @Rozkalns 这是插件 效果很好。谢谢! 完美运行!只是想明确插件必须在 auth config 中注册,而不是在 plugins 属性中注册,auth.nuxtjs.org/recipes/extend【参考方案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();
;
【讨论】:
以上是关于如何让 Nuxt-auth 和 Nuxt-i18n 成为朋友的主要内容,如果未能解决你的问题,请参考以下文章
如何对使用 nuxt-i18n 的 Vue.js 组件进行单元测试
Nuxt.js:消息:“找不到此页面”(nuxt-i18n)
路由器使用 nuxt-i18n 推送 nuxt 中的区域设置路由