Firebase未认证重定向报错：Cannot read properties of undefined (reading '$router')

问题原因 #

Vue组件中能直接用this.$router.push，是因为Vue Router会自动把路由实例注入到所有组件的上下文里。但firebase.js是独立的工具文件，不属于Vue组件，没有这个上下文，所以直接用this.$router会报错。

解决步骤 #

1. 确保路由实例已导出 #

先检查你的路由配置文件（通常是src/router/index.js），确认已经导出了路由实例：

Vue 2 示例

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home }
]

const router = new VueRouter({ routes })

export default router // 关键：导出路由实例

Vue 3 示例

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', name: 'Home', component: Home }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router // 关键：导出路由实例

2. 在firebase.js中导入路由实例 #

在firebase.js开头导入刚才导出的路由实例，路径根据你的项目结构调整：

import { getAuth, onAuthStateChanged } from "firebase/auth";
import router from './router'; // 导入路由实例

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (!user) {
    // 直接用路由实例的push方法跳转
    router.push('/');
  }
});

这样就能在Firebase的认证监听回调里正常执行页面重定向了。

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