Angular应用登出后跳转登录页异常：短暂生效后返回首页

问题现象 #

在Angular应用中执行登出操作后，用户会从首页跳转至登录页，但该跳转仅生效几秒，随后自动跳回首页。

相关代码实现 #

路由配置 #

RouterModule.forRoot([
        {path:"", component: HomeComponent , canActivate: [AuthGuard]},
        {path:"login", component: LoginComponent},
        {path:"signup", component: SignupComponent},
])

AuthService.service.ts #

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  loggedUser!: any;

  constructor(
    private router: Router,
    private auth: AngularFireAuth,
    private fireStore: AngularFirestore
  ) {}

 get isLoggedIn() {
    return this.loggedUser !== null;
  }
   
 // 登出函数 
    async signout() {
       await this.auth.signOut();
       localStorage.removeItem('user');
       this.loggedUser = null; 
       this.router.navigate(['login']);
    }
}

AuthGuard实现 #

export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router : Router){}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        if(!this.authService.isLoggedIn){
            this.router.navigate(['login']);
        }
        return true;
  }
  
}

问题原因 #

1. AuthGuard逻辑错误：即使检测到用户未登录并调用了router.navigate(['login'])，但最终返回true，这会让Angular继续执行原首页路由的加载流程，导致登录页短暂显示后又跳回首页。
2. AuthService初始状态问题：loggedUser使用!断言为非undefined类型，但初始值实际是undefined，此时isLoggedIn返回true（因为undefined !== null），可能导致未登录时Guard误判用户已登录。

解决方案 #

1. 修正AuthGuard的canActivate逻辑 #

将Guard的返回值改为：当用户未登录时返回UrlTree（让Angular自动处理导航并取消原路由），已登录时返回true。修改后的代码：

export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router : Router){}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        if(!this.authService.isLoggedIn){
            // 返回UrlTree，Angular会自动导航到登录页并终止原路由
            return this.router.createUrlTree(['login']);
        }
        return true;
  }
}

2. 修正AuthService的初始状态和isLoggedIn判断 #

将loggedUser初始化为null，并完善isLoggedIn的判断逻辑，避免初始状态误判：

export class AuthService {
  // 初始化为null，避免undefined导致的判断错误
  loggedUser: any = null;

  constructor(
    private router: Router,
    private auth: AngularFireAuth,
    private fireStore: AngularFirestore
  ) {}

 get isLoggedIn() {
    // 同时判断null和undefined，确保未登录时返回false
    return this.loggedUser !== null && this.loggedUser !== undefined;
  }
   
 // 登出函数 
    async signout() {
       await this.auth.signOut();
       localStorage.removeItem('user');
       this.loggedUser = null; 
       this.router.navigate(['login']);
    }
}

说明 #

修改后，当用户登出时，AuthGuard会正确拦截首页路由并跳转到登录页，不会再出现自动返回的情况。

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