Angular登录后重定向主页异常：代码报错及解决咨询

核心问题分析 #

1. 命名冲突导致state.url报错
   你导入了@angular/animations中的state函数，它和路由逻辑中需要的路由状态变量重名了。当前代码里的state是动画API的函数，而非路由状态对象，自然不存在url属性。

2. isLoggedin方法逻辑错误
   该方法使用subscribe异步操作，内部的return true/false无法同步返回结果，因为subscribe是异步执行的，方法会直接返回undefined，达不到预期的认证判断效果。

分步解决方案 #

1. 修复命名冲突，获取正确路由地址 #

• 删除冲突的导入：import { state } from "@angular/animations";
• 用Router实例的url属性直接获取当前路由地址，替代错误的state.url。

2. 重构认证方法，适配异步逻辑 #

将isLoggedin改为返回Observable<boolean>，符合Angular异步数据流的处理方式：

import { Injectable } from "@angular/core";
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import firebase from 'firebase/compat/app';
import { Router } from "@angular/router";
import { startAfter } from "@angular/fire/firestore";

@Injectable({ providedIn: 'root' }) 
export class AuthService {
  user$: Observable<firebase.User|null>;

  constructor(private afAuth: AngularFireAuth, private router: Router) {
    this.user$ = afAuth.authState;
  }

  login() {
    this.afAuth.signInWithRedirect(new GoogleAuthProvider());
  }

  logout(){
    this.afAuth.signOut().then(() => {
      this.router.navigate(['/login']);
    });
  }

  isLoggedIn(): Observable<boolean> {
    return this.user$.pipe(
      map(user => {
        if (user) {
          return true;
        }
        // 传递当前路由地址作为重定向目标
        this.router.navigate(['/login'], { queryParams: { returnUrl: this.router.url } });
        return false;
      })
    );
  }
}

3. 推荐使用路由守卫实现认证拦截（最佳实践） #

服务中的认证方法不适合直接做路由拦截，建议创建路由守卫：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { map, take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    return this.authService.user$.pipe(
      take(1),
      map(user => {
        if (user) {
          return true;
        }
        // 拦截未登录请求，跳转登录页并携带目标地址
        this.router.navigate(['/login'], { queryParams: { returnUrl: this.router.url } });
        return false;
      })
    );
  }
}

在路由配置中使用守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 完善登录后重定向逻辑 #

在LoginComponent中，登录成功后读取returnUrl参数并跳转：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  constructor(
    private authService: AuthService,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.authService.user$.subscribe(user => {
      if (user) {
        // 读取重定向地址，默认跳转到主页
        const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
        this.router.navigate([returnUrl]);
      }
    });
  }

  login() {
    this.authService.login();
  }
}

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