угловой 6 охранник наблюдаемый подвесной - PullRequest
Новая
       9

угловой 6 охранник наблюдаемый подвесной

0 голосов
/ 10 октября 2018

сначала я создал 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
        }
        }),
      )
  }
}

, она работает и выводит на консоль «allowe to show», но страница не отображается, поэтому ячувствую, что я в цикле, не останавливайтесь, если я верну 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
        })
      )

  }
}

1 Ответ

0 голосов
/ 11 октября 2018

Логическое значение уже возвращается map(user=>!!user), tap является оператором побочного эффекта.Попробуйте заменить кран на 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

        }),
      )
  }
...