Angular 9 - активируются несколько маршрутов - PullRequest
Новая
       7

Angular 9 - активируются несколько маршрутов

0 голосов
/ 27 апреля 2020

Я пытаюсь войти в систему пользователя и перенаправить его на панель мониторинга.

Весь процесс работает нормально, но пока я вижу компонент формы входа И компонент панели мониторинга на одновременно (это 2 разных маршрута).

Что я делаю не так? Почему angular показывает оба компонента одновременно? Из-за задержки в HTTP-вызове canActivate медленно до go false для одного сторожа? Что можно сделать?

У меня есть 2 охранника (один будет перенаправлен на "/" при аутентификации, другой перенаправит на "/ login", если не аутентифицирован): 

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../auth.service';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UnauthenticatedGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {

  }

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

    return this.authService.isAuthenticated()
      .pipe(
        map(x => {
          if (x) {
            this.router.navigate(['/']);
            return false;
          }
          return true;
        })
      )

  }

}

и 

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../auth.service';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthenticatedGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {

  }

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

    return this.authService.isAuthenticated()
      .pipe(
        map(x => {

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

          return true;
        })
      );

  }

}

и набор маршрутов в 2 разных модулях: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { UnauthenticatedGuard } from './guard/unauthenticated.guard';


const routes: Routes = [{
  path: 'login', component: LoginComponent, canActivate: [UnauthenticatedGuard]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule { }



import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { AuthenticatedGuard } from '../auth/guard/authenticated.guard';

const routes: Routes = [{
  path: '', component: DashboardComponent, canActivate: [AuthenticatedGuard]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashRoutingModule { }

1 Ответ

0 голосов
/ 27 апреля 2020

Так что я понял это. В промежуточном логе c, куда я перенаправлял после аутентификации на «/», мне пришлось обернуть его вокруг 

this.zone.run(() => {
        this.router.navigate(['/']);
      })
...