Angular 15路由守卫返回UrlTree时不执行重定向问题

你这个路由守卫失效的核心问题是没返回Angular路由守卫需要的异步返回值。现在的代码里，你调用authService.isLoggedIn().subscribe(...)后，守卫函数本身没有返回任何东西——subscribe回调里的return只是回调自己的返回，不是守卫的返回值，Angular会把undefined当成允许路由通过，所以重定向根本没触发。

Angular的canActivate守卫支持的返回类型包括：

• 布尔值boolean
• 路由树UrlTree
• 可观察对象Observable<boolean | UrlTree>
• 承诺Promise<boolean | UrlTree>

把subscribe换成map操作符，让守卫返回一个Observable，Angular会自动等待这个异步结果并处理：

import { inject } from '@angular/core';
import { Router, UrlTree } from '@angular/router';
import { map } from 'rxjs/operators';

import { AuthService } from '../service/auth.service';

export const LoggedInGuard = () => {
    const authService = inject(AuthService);
    const router = inject(Router);

    // 返回Observable，交给Angular处理异步逻辑
    return authService.isLoggedIn().pipe(
        map(isLoggedIn => {
            console.log(isLoggedIn);
            if (isLoggedIn) {
                return true;
            }
            // 返回UrlTree，Angular会自动触发重定向
            return router.parseUrl('/login');
        })
    );
};

如果习惯用async/await，也可以把Observable转成Promise来处理（RxJS 7+推荐用lastValueFrom替代旧的toPromise）：

import { inject } from '@angular/core';
import { Router, UrlTree } from '@angular/router';
import { lastValueFrom } from 'rxjs';

import { AuthService } from '../service/auth.service';

export const LoggedInGuard = async () => {
    const authService = inject(AuthService);
    const router = inject(Router);

    const isLoggedIn = await lastValueFrom(authService.isLoggedIn());
    console.log(isLoggedIn);
    if (isLoggedIn) {
        return true;
    }
    return router.parseUrl('/login');
};

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