angular - angular 5 auth 保护导航

Question

当我尝试实现导航问题的安全性时，我的应用程序在没有身份验证保护的情况下运行良好。问题是 auth guard 正在通过条件（使用 console.log 测试）。url 正在更改为 /prpage 但是viewport 仍然保留在我看到 /formpage 的内容并且没有正确导航到该页面（/prpage）的位置。

应用路由器.module.ts

{
   path: 'prpage', 
   component: PrPageComponent,
   canActivate: [AuthGuard] 
 }

auth.guard.ts

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
   if (this.userService.id) {
    console.log("pass");
      return true;
    }
this.router.navigate(['/register'], { relativeTo: this.route });
      console.log("fail");
      return false;
  }
}

form.component.ts

if(response.name!==null){
 this.router.navigate(['/prpage'], { relativeTo: this.route });
}