Ionic已登录用户重定向问题：返回APP跳转首页而非登录页

先分析你之前代码的核心问题 #

你遇到的跳转失败和报错，主要是两个关键原因：

1. this指向错误：你用了普通function作为onAuthStateChanged的回调，导致回调里的this不再指向组件实例，自然找不到router对象。
2. 路由路径不匹配：你的路由配置里首页是/tabs/home，但你在app.component里写的是/home，路径完全不对应。

方案一：在登录页的ionViewWillEnter中处理（推荐） #

修改登录页的代码，把回调改成箭头函数（箭头函数不会改变this的指向，会继承外层组件的上下文）：

ionViewWillEnter() {
  firebase.auth().onAuthStateChanged((user) => { // 改用箭头函数
    if (user) {
      console.log("user is logged in");
      this.router.navigateByUrl('/tabs/home'); // 匹配你的路由配置
    } else {
      console.log("user is not logged in");
      // 未登录则停留在登录页，无需额外操作
    }
  });
}

这样每次登录页即将进入时，都会自动检查firebase的登录状态，如果用户已登录，直接跳转到首页，完美解决返回APP时的自动跳转需求。

方案二：在app.component.ts的初始化逻辑中处理 #

如果想在APP启动时就判断登录状态并跳转，同样需要修复this指向和路由路径：

initializeApp() {
  this.platform.ready().then(() => {
    this.statusBar.overlaysWebView(true);
    this.statusBar.show();
    // 用箭头函数保证this指向app组件实例
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log("user is logged in");
        this.router.navigateByUrl('/tabs/home'); // 正确的首页路径
      } else {
        console.log("user is not logged in");
        this.router.navigateByUrl('/login'); // 未登录主动跳登录页，因为默认路由是tabs
      }
    });
  });
}

更严谨的最佳实践：添加路由守卫 #

为了避免用户手动输入URL绕过登录校验，建议给需要登录的页面（比如tabs模块）添加路由守卫CanActivate：

1. 先创建一个AuthGuard服务：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): Promise<boolean> {
    return new Promise((resolve) => {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          resolve(true); // 已登录，允许访问目标页面
        } else {
          this.router.navigate(['/login']); // 未登录，强制跳登录页
          resolve(false); // 拒绝访问目标页面
        }
      });
    });
  }
}

2. 修改路由配置，给tabs路由添加守卫：

const routes: Routes = [
  { 
    path: '', 
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    canActivate: [AuthGuard] // 给tabs模块添加登录守卫
  },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'welcome', loadChildren: './welcome/welcome.module#WelcomePageModule' },
  { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' }
];

这样就能形成完整的登录校验闭环：

• 已登录用户返回APP，要么被登录页的ionViewWillEnter跳首页，要么被APP初始化逻辑直接引导到首页
• 未登录用户无法直接访问tabs页面，会被守卫拦截跳转到登录页
• 完全依赖firebase官方的auth状态判断，比localStorage更安全可靠，避免被篡改或过期的问题

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