前提・実現したいこと
Nuxt.js(SPAモード)、FIrebase Authenticationを利用してSAPのWEBサイト構築をしています。
SNSサイトを想定しており、認証が必要な画面と不要な画面で分けております。
・認証が必要な画面:/home
・認証が不要な画面:/index /sign-in /sign-up
以下の処理を実現したいのです。
[実現したい内容]
FIrebase Authenticationで認証中の場合(auth().onAuthStateChangedがture)は、強制的に「/home」に飛ばすように実装したい。
[困っていること]
画面をリロードした際に、/index・/sign-in・/sign-upの画面から/homeに移動することは実現できたが、前画面の内容が一瞬表示されてからの移動となってしまう。(ここが上手くいきません)
実装内容
【middeware】
export default ({ store, route, redirect }) => {
if (
store.getters['auth/isAuthenticated'] && //vuexの認証状態を取得
(route.name === 'index' ||
route.name === 'sign-in' ||
route.name === 'sign-up')
) {
redirect('/home')
}
}
【plugins】
export default ({ $axios, store, route, redirect }) => {
auth().onAuthStateChanged(async (user) => {
await store.dispatch('auth/createUser', user) //firebase認証情報をvuexに格納
if (user) {
//middrewareの方がpluginsより先に処理されるため、リロードの際の最初は「store.getters['auth/isAuthenticated']」がfalseになってしまう。
上記に対処するため、pluginsにも以下処理を実行。
if (
store.getters['auth/isAuthenticated'] &&
(route.name === 'index' ||
route.name === 'sign-in' ||
route.name === 'sign-up')
) {
redirect('/home')
}
}
})
}
上記で基本的には動くが、どうしてもリロード時にindex画面等の内容が一瞬表示されてから、/homeに移動します。
(画面描写後にpluginsが実行されているからだと認識してます)
もしご存知の方いらっしゃいましたら、このチラつきを防止する方法をご教示いただければと思います。
補足情報(FW/ツールのバージョンなど)
nuxt: 2.15.7
vue:2系
あなたの回答
tips
プレビュー