Vue.js+vue-router+Firebase应用异常重定向问题求助

Hey there, let's work through that annoying redirect bug you're hitting. Based on the code snippets you shared, here are the most common culprits and actionable fixes:

1. Move Firebase Initialization to the Top of main.js #

Right now you're initializing Firebase inside a Vue instance's created hook, which means your auth state might not be ready when your router guards run. This can lead to premature redirects before Firebase has a chance to sync the user's session.

Update your main.js to initialize Firebase before creating the Vue instance:

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import firebase from 'firebase/app'
import 'firebase/auth' // Don't forget to import the auth module!

// Initialize Firebase first
firebase.initializeApp({ 
  apiKey: "xxxxxxxxxxx", 
  authDomain: "xxxxxxx.firebaseapp.com", 
  databaseURL: "https://xxxxxxxxxx.firebaseio.com", 
  projectId: "xxxxxxxxxx", 
  storageBucket: "", 
})

// Now create your Vue instance
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2. Ensure Router Guards Wait for Auth Initialization #

Most redirect loops happen because router guards check store.state.user before Firebase has finished loading the user's session. Fix this by making your router guard wait for auth state to stabilize:

In your router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase/app'
import store from '../store'

Vue.use(Router)

const router = new Router({
  routes: [
    // Your routes here, add meta.requiresAuth to protected pages
  ]
})

router.beforeEach(async (to, from, next) => {
  // Wait for Firebase to finish initializing auth state
  await new Promise(resolve => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      unsubscribe() // Clean up the listener after initial check
      resolve(user)
    })
  })

  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const currentUser = store.state.user

  // Handle redirect logic only after auth state is ready
  if (requiresAuth && !currentUser) {
    next('/login')
  } else if (!requiresAuth && currentUser) {
    next('/dashboard') // Adjust to your default authenticated route
  } else {
    next() // Proceed as normal
  }
})

export default router

3. Complete the setUser Mutation in Your Store #

Your mutation code is incomplete—make sure it properly sets the user state (including clearing it when the user signs out):

// store/index.js
const state = { user: null }

const mutations = { 
  setUser(state, payload) { 
    state.user = payload || null // Fallback to null if no user is provided
  }
}

const actions = {
  autoSignIn({ commit }, user) {
    commit('setUser', user)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

4. Avoid Unnecessary Redirects in Auth State Listener #

If you're triggering redirects directly from the auth state listener, add checks to prevent duplicate navigation:

// Add this to main.js after initializing Firebase
firebase.auth().onAuthStateChanged((user) => { 
  if(user) { 
    store.dispatch('autoSignIn', user)
    // Only redirect if we're on the login page
    if (router.currentRoute.path === '/login') {
      router.push('/')
    }
  } else {
    store.commit('setUser', null)
    // Only redirect if we're on a protected page
    if (router.currentRoute.matched.some(record => record.meta.requiresAuth)) {
      router.push('/login')
    }
  }
})

These changes should eliminate the unexpected redirects by ensuring auth state is fully synchronized before any routing logic runs, and preventing redundant navigation triggers.

内容的提问来源于stack exchange，提问作者Yernar