Angular 6 防护可观察悬挂

Question

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

这是代码

    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']);
          }
      })
    )


  }
}

所以，它工作得很好，但是第二个守卫中出现问题，我检查用户是否登录，他不允许再次浏览登录路由，所以我创建了这个守卫

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
import { AuthenticationService } from '../auth/authentication.service';
import { tap, take, map, } from 'rxjs/operators';
import { of } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
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(
        take(1),
        map(user => !!user),
        tap(isAuthenticated => {

        if(isAuthenticated){
          console.log('not a allow')
          this.router.navigate(['']);
        }
        else{
          console.log('allowe to show')
          return true
         //return of(true) give me the same resault
        }
        }),
      )
  }
}

它正在工作，控制台打印“允许显示”，但页面没有出现，所以我觉得我在循环中，如果我返回 true 而不是我的代码在第二个保护页面工作，则不会停止

这也是一个路由代码

    const routes: Routes = [
    {
        path: '',
        component: PagesComponent,
        canActivate:[IsUserGuard],
        children: [
            {
                path: '',
                loadChildren: './components/dashboard/dashboard.module#DashboardModule'
            },
        ]
    },
    {
        path: 'login',
        canActivate: [IsGuestGuard],
        loadChildren: './auth/auth.module#AuthModule',
    },
    {
        path: '404',
        component: ErrorPageComponent
    },
    {
        path: 'error/:type',
        component: ErrorPageComponent
    },
];

在@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
        })
      )

  }
}

Answer 1

bool 值已由 map(user=>!!user) 返回，tap 是一个副作用运算符。尝试用 map() 替换 tap 并返回正确的值，看看它是否有效。

 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

        }),
      )
  }