Nuxt.jsでアプリケーションを開発する際、ログイン認証にAuth Module、国際化にnuxt-i18nを使いました。
どちらも簡単に実装でき便利なライブラリですが、ログイン画面の国際化がうまくいかずハマってしまいました。
問題：言語の切り替えができない
nuxt-i18nを使用することで、アプリケーションを簡単に国際化することができます。
設定方法については、省略しますが、
パスのルートに言語の識別子を追加することで、言語の切り替えを行ってくれます。
例えば、
/ja/pageだと日本語表示になり、/en/pageだと英語表示になるように実装できます。
/pageの場合は、デフォルトに設定した言語で表示されます。
しかし、Auth Moduleを用いてログイン認証を実装している場合、ここで問題が起こります。
Auth Moduleは、下記のように、nuxt.config.jsにログイン画面のパスを/loginと記述すると、未ログイン時はログイン画面/loginにリダイレクトしてくれます。
export default {
// ...
auth: {
redirect: {
login: '/login', // ログイン画面のパス
logout: '/login', // ログアウト時のリダイレクト先
callback: false,
home: '/' // ホーム画面のパス（ログイン後のリダイレクト先）
}
}
// ...
}
つまり、/en/loginのようなパスでアクセスしても/loginにリダイレクトされてしまい、英語ではなくデフォルト言語で表示されてしまうのです。
解決策：リダイレクト先を書き換える
nuxt.config.jsで設定したリダイレクト先を書き換えるコードをpluginsに追加します。
export default ({ app, route }) => {
// パスに識別子が存在するときのみ書き換え
if (route.fullPath.indexOf('/' + app.i18n.locale + '/') === 0) {
// nuxt.config.jsで記述したリダイレクト情報を取得
const redirect = app.$auth.$storage.options.redirect
for (const key in redirect) {
// 書き換え後のリダイレクト先を定義
redirect[key] = '/' + app.i18n.locale + redirect[key]
}
// リダイレクト情報の書き換え
app.$auth.$storage.options.redirect = redirect
}
}
そして、nuxt.config.jsにauth.jsのパスを追記します。
export default {
auth: {
redirect: {
login: '/login',
logout: '/login',
callback: false,
home: '/'
},
plugins: [ // ******
'@/plugins/auth.js' // 追記
] // ******
}
}
これでログイン画面の言語の切り替えが行われます。
例えば、パスが/en/loginの場合、/loginにリダイレクトされる前に、ログイン画面のパスを/en/loginに書き換えるため、/en/loginにリダイレクトされるようになりました。
まとめ
今回はpluginsを追加することでリダイレクト先を書き換えるという強引な解決策でした。
もっと良い方法があるかもしれませんが参考になれば幸いです。
もしもっと良い方法があれば教えてください！！