javascript - 如何路由防范不存在的 url 路径？

Question

我想将用户重定向到我创建的 404 页面，以防他们尝试访问不存在的页面(例如/blogs/nonexistent-title)。问题是我正在向数据库发出 http get 请求并检查返回的元素是否为空。如果它为空，我会将用户发送到 404 页面。然而，angular http 返回一个永远不会为 null 的可观察对象，无论数据库是否返回 null。

HTTP

getSingleBlogArticle(title:String):Observable<BlogEntryModel>   {
    return this.http.get(this.getBlogArticleUrl+"/"+title,httpOptions)
    .pipe(
      catchError(this.handleError<any>('Get form details'))
    );
  }

路由守卫

  constructor(private resolverService: ResolveService, private router: Router,private websiteBackendService :WebsiteBackendService) { 

  }

  canActivate(route: ActivatedRouteSnapshot) {
    let item = this.websiteBackendService.getSingleBlogArticle(route.params['id']);
       let containsRoute = !!this.websiteBackendService.getSingleBlogArticle(route.params['id']);
       console.log(item);
       if(!containsRoute) {
         this.router.navigate(['/404']);
       }

    return containsRoute;
  }

路由

{path:'blog/:id',component: FullBlogEntryComponent,canActivate:[RouteActivatorService]},

Answer 1

问题是您目前正在治疗 getSingleBlogArticle好像它是同步响应，而不是 RxJS Observable<any> . CanActivate你在这个守卫中实现的，需要以下返回类型:

Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree

使用可管道运算符尝试以下操作 map和 tap通过 !! 将响应转换为 bool 值如果值为 falsy，则执行导航/重定向:

import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

// ...    

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
  return this.websiteBackendService.getSingleBlogArticle(route.params['id']).pipe(
    map(response => !!response),
    tap(containsRoute => {
      if (!containsRoute) {
        this.router.navigate(['/404']);
      }
    })
  );
}

我强烈建议您查看有关 [Observables] 的 Angular 文档。还有关于 Route Guards 的部分广泛引用了将 Observables 与守卫以及路由数据解析器结合使用。

希望对您有所帮助!