Angular Guard 函数返回布尔可观察值

Question

我需要有一个路由保护函数从 localStorage 读取一些数据，但由于 Angular 的执行方式（根据我所读到的），它不会等待在完成保护函数之前读取值。这就是为什么需要一个可观察量，它实际上等待处理数据。

问题是所有示例都有服务和其他额外的东西。我只需要读取 localStorage 值。一点也不花哨。这将返回一个可观察的布尔值或一个 UrlTree。

export const isValuePresentGuard: CanActivateFn = (): Observable<boolean> | UrlTree => {
    const fromLocalStorage = localStorage.getItem('data');
    
    if(fromLocalStorage) {
        return true;
    }

    return inject(Router).createUrlTree(['/another-page']);
};

我可能想多了。有什么想法吗？

Answer 1

CanActivateFn

实际上定义为

export type CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
    Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree;

您可以毫无问题地退货

boolean|UrlTree

。