Nuxt.js + FirebaseAuthenticationでログインした際に指定したページに正しくリダイレクトできるようにしたい

実現したいこと

前提

• Nuxt.js+Firebaseでのログイン機能を作っています。
• 少し古いブログの記事ですが、以下のページを参照して実装しました。

発生している問題・エラーメッセージ

• エラーメッセージは出ていないのですが、ログイン画面でのログインに成功した後もログイン画面が表示されてしまいます。本当はトップ画面（index.vue）に遷移したいです。

該当のソースコード

◆ ディレクトリ構成

- pages - index.vue - login.vue - signup.vue - middleware - authenticated.js - store - fireabseAuth.js - plugins - firebase.js - firebase.auth.js - nuxt.config.js

◆ pages

login.vue

1// 関係箇所以外は省略させて頂きます。 2export default { 3 methods: { 4 signInWithGoogle(){ 5 this.$store.dispatch('firebaseAuth/signInWithGoogle') 6 .then(() => { 7 this.$router.push("/") 8 }) 9 .catch((err) => { 10 this.$parent.socialLoginErrorMsg = 11 '現在Googleでのログインは使用できません。後ほどお試しください。' 12 }) 13 } 14 } 15}

◆ store

firebaseAuth.js

1import { auth } from '~/plugins/firebase.js' 2 3export const state = () => ({ 4 user: null, 5}) 6 7export const mutations = { 8 setUser(state, { payload }) { 9 state.user = payload 10 } 11} 12 13export const actions = { 14 signInWithGoogle({ commit }){ 15 return auth().signInWithRedirect(new auth.GoogleAuthProvider()) 16 }, 17} 18 19export const getters = { 20 user(state){ 21 return state.user 22 }, 23 isAuthenticated (state) { 24 return !!state.user 25 } 26}

◆ plugins

firebase.js

1import Firebase from 'firebase/compat/app' 2import 'firebase/compat/auth' 3import 'firebase/compat/firestore' 4import 'firebase/compat/storage' 5 6if (!Firebase.apps.length) { 7 Firebase.initializeApp({ 8 apiKey: "xxxx", 9 authDomain: "xxxx", 10 projectId: "xxxx", 11 storageBucket: "xxxx", 12 messagingSenderId: "xxxx", 13 appId: "xxxx", 14 measurementId: "xxxx" 15 }); 16} 17 18export default (context, inject) => { 19 const $fb = { 20 app: Firebase.app, 21 firestore: Firebase.firestore, 22 storage: Firebase.storage, 23 } 24 inject('fb',$fb) 25} 26export const auth = Firebase.auth

firebase.auth.js

1import { auth } from '~/plugins/firebase.js' 2 3export default (context) => { 4 const { store } = context 5 6 return new Promise((resolve, reject) => { 7 auth().onAuthStateChanged(user => { 8 store.commit('firebaseAuth/setUser', user) 9 resolve() 10 }) 11 }) 12}

◆ middleware

authenticated.js

1export default ({ store, route, redirect }) => { 2 if (!store.getters.isAuthenticated && route.name !== 'login' && route.name !== 'signup') { 3 redirect('/login') 4 } 5 if (store.getters.isAuthenticated && (route.name === 'login' || route.name === 'signup')) { 6 redirect('/markdown_articles') 7 } 8}

◆ nuxt.config.js

export default { // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [ { src: "~/plugins/firebase.js", ssr: false }, { src: "~/plugins/firebase.auth.js", ssr: false }, { src: "~/plugins/vue-mavon-editor", ssr: false } ], router: { middleware: 'authenticated' } }

ご質問内容

上述させて頂いたソースコードで、login.vueでsignInWithGoogleが実行されたときに、index.vueに遷移せず、login.vueが表示されたままになってしまいます。

デベロッパーツールのConsoleを見ても、特にエラーなどは表示されておらず、どのように解消すれば良いのかわからずご質問させて頂きました。

Nuxt.jsの初学者の為、設定やコードで不足している部分等の見落としもあるかと思います。すみません。
もし解消方法や、より適切な方法をご存知の方がいらっしゃいましたら、ご教示頂けましたら幸いです。

お手数をおかけしてしまい大変恐縮なのですが、
何卒よろしくお願い致します。