Angular 角度6可观察悬挂

首先，我创建了两个守卫，一个检查用户是否登录，如果没有导航到登录路径

这是密码

    import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../auth/authentication.service';
import { Router } from '@angular/router';
import { tap, map, take } from 'rxjs/operators';
import {of} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IsUserGuard implements CanActivate {
  constructor( private auth:AuthenticationService, private router:Router){}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return this.auth.user$.pipe(
      take(1),
      map(user => !!user),
      tap(isAuthenticated => {
          if(!isAuthenticated){
            console.log('must login');
            this.router.navigate(['/login']);
          }
      })
    )


  }
}

这段代码在帮助大家@JeffFairley@fan cheung之后生效，谢谢大家

export class IsGuestGuard implements CanActivate {
  constructor(private router:Router, private auth:AuthenticationService){}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

      return this.auth.user$.pipe(
        map(isAuthenticated => {

          if(isAuthenticated){
            this.router.navigate(['/']);
            return false
          }

            return true
        })
      )

  }
}

导出类IsGuestGuard实现CanActivate{
构造函数（专用路由器：路由器，专用身份验证：AuthenticationService）{}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔值{
返回此.auth.user$.pipe(
映射（已验证=>{
如果（未经验证）{
this.router.navigate（['/']）；
返回错误
}
返回真值
})
)
}
}

布尔值已经由

映射（用户=>！！用户）

返回，

点击

是一个副作用操作符。尝试用

map（）

替换点击，并返回正确的值，查看其是否正常工作

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      return this.auth.user$.pipe(
        take(1),
        map(user => !!user),
        map(isAuthenticated => {

        if(isAuthenticated){
          console.log('not a allow')
          this.router.navigate(['']);
            return false
        }

          console.log('allowe to show')
          return true
         //return of(true) give me the same resault

        }),
      )
  }

canActivate(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔值{
返回此.auth.user$.pipe(
以（1）为例，
映射（用户=>！！用户），
映射（已验证=>{
如果（未经验证）{
console.log（'不允许'）
这个.router.navigate（['']）；
返回错误
}
console.log（'允许显示'）
返回真值
//返回（真）给我同样的结果
}),
)
}

在这两种情况下，您都在打印相同的消息。在if和else条件中更改日志消息，并再次检查通过了哪些条件。@SunilSingh抱歉，我复制了错误的代码，我再次检查它，但仍然是相同的。您是否为相同的路由使用了两个防护装置？如果是，那么这两个卫兵将永远处于循环中。为了更好地检查这一点，请将控制台日志放在开头。您的示例在

tap（）

中有

return true

。您不能从点击

返回，因为它不会转换数据。如果要转换数据，应使用
map（）
。回答是一样的。@JeffFairley它工作得很好，所以第一个守卫我也不应该只使用点击地图来处理我想做的事情，并返回布尔值。它工作得很好，所以守卫中的选项卡在我的代码中没有用！我只使用一个映射，而不是两个，并在映射内部处理数据，运行我想要的，并最终返回布尔值
export class IsGuestGuard implements CanActivate {
  constructor(private router:Router, private auth:AuthenticationService){}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

      return this.auth.user$.pipe(
        map(isAuthenticated => {

          if(isAuthenticated){
            this.router.navigate(['/']);
            return false
          }

            return true
        })
      )

  }
}

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      return this.auth.user$.pipe(
        take(1),
        map(user => !!user),
        map(isAuthenticated => {

        if(isAuthenticated){
          console.log('not a allow')
          this.router.navigate(['']);
            return false
        }

          console.log('allowe to show')
          return true
         //return of(true) give me the same resault

        }),
      )
  }