Angular 6 - NavigationCancel - причина: «страж маршрута вернул false» - еще до того, как охранник закончил - PullRequest
Новая
       32

Angular 6 - NavigationCancel - причина: «страж маршрута вернул false» - еще до того, как охранник закончил

1 голос
/ 12 марта 2019

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

Проблема: когда я нажимаю кнопку, чтобымаршрут, маршрут запускается, но сразу же отменяется (отслеживается в консоли) по следующей причине: 

NavigationCancelingError: Cannot load children because the guard 
of the route "path: 'meldungsmanagement'" returned false

, хотя отладка angular показывает, что метод onLoad даже не разрешается - и он возвращает true!

appRouting.module.ts 

import {NgModule} from '@angular/core';
import {PortalComponent} from './portal/portal.component';
import {AuthGuardService} from './core/authguard.service';
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'startseite',
        pathMatch: 'full'
    },
    {
        path: 'startseite',
        component: PortalComponent
    },
    {
        path: 'meldungsmanagement',
        loadChildren: './incidents/incidentOverview.module#IncidentOverviewModule',
        canLoad: [AuthGuardService]
    },

];

@NgModule({
    imports: [RouterModule.forRoot(
        appRoutes,
        {enableTracing: true})], // enable only for debugging purposes
    exports: [RouterModule]
})
export class AppRoutingModule {
}

AuthGuardService: 

import {Injectable} from '@angular/core';
import {
    ActivatedRouteSnapshot,
    CanActivate,
    CanLoad,
    Route,
    Router,
    RouterStateSnapshot,
    UrlSegment
} from '@angular/router';
import {GlobalSettingsService} from './globalSettings.service';
import {Observable} from 'rxjs';
import {NavbarService} from './navbar.service';
import {NavbarModel} from '../shared/models/navbar.model';
import {KeycloakService} from './keycloak/keycloak.service';

@Injectable()
export class AuthGuardService implements CanActivate, CanLoad {

    constructor(private router: Router,
                private keycloakService: KeycloakService,
                private navBarService: NavbarService,
                private globalSettings: GlobalSettingsService) {
    }

    canLoad(route: Route,
            segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {

        const isLoggedIn = this.keycloakService.isAuthenticated();
        if (isLoggedIn) {

            this.navBarService.getStucture().subscribe(menuRoutes => {                    
                    const isAccessAllowed: boolean = this.checkRoleAccessAllowed(segments, menuRoutes);
                    console.log('AuthGuard.canLoad() - return ' + isAccessAllowed + ' for route ' + route.path);
                    return Promise.resolve(isAccessAllowed);
                }
            );
        } else {
            console.log('AuthGuard.canLoad() - return false (not loggedIn) for route ' + route.path);
            return Promise.resolve(false);
        }
    }

    checkRoleAccessAllowed(url: UrlSegment[], menu: Array<NavbarModel>): boolean {
        const foundNavbarModel: NavbarModel = menu.find(value => value.link.indexOf(url[0].path) > -1);
        if (foundNavbarModel) {
            return true;
        } else {
            return false;
        }
    }
}

консольный вывод: (прослеживается от нажатия кнопки до включения "meldungsmanagement") 

 Router Event: NavigationStart
 NavigationStart(id: 3, url: '/meldungsmanagement')
 NavigationStart {id: 3, url: "/meldungsmanagement", navigationTrigger: "imperative", restoredState: null}
 Router Event: NavigationCancel
 NavigationCancel(id: 3, url: '/meldungsmanagement')
 NavigationCancel {id: 3, url: "/meldungsmanagement", reason: "NavigationCancelingError: Cannot load children bec…route "path: 'meldungsmanagement'" returned false"}id: 3reason: "NavigationCancelingError: Cannot load children because the guard of the route "path: 'meldungsmanagement'" returned false"url: "/meldungsmanagement"__proto__: RouterEvent
 Router Event: NavigationStart
 NavigationStart(id: 4, url: '/')
 NavigationStart {id: 4, url: "/", navigationTrigger: "imperative", restoredState: null}
 Router Event: RoutesRecognized
 Router Event: GuardsCheckStart
 Router Event: GuardsCheckEnd
 Router Event: ActivationEnd
 Router Event: ChildActivationEnd
 Router Event: NavigationEnd
 Router Event: Scroll
 Router Event: NavigationStart
 NavigationStart(id: 5, url: '/')
 NavigationStart {id: 5, url: "/", navigationTrigger: "imperative", restoredState: null}
 AuthGuard.canLoad() - return true for route meldungsmanagement
 Router Event: RoutesRecognized
 RoutesRecognized(id: 5, url: '/', urlAfterRedirects: '/startseite', state: Route(url:'', path:'') { Route(url:'startseite', path:'startseite') } )
 RoutesRecognized {id: 5, url: "/", urlAfterRedirects: "/startseite", state: RouterStateSnapshot}
 Router Event: GuardsCheckStart
 GuardsCheckStart(id: 5, url: '/', urlAfterRedirects: '/startseite', state: Route(url:'', path:'') { Route(url:'startseite', path:'startseite') } )
 GuardsCheckStart {id: 5, url: "/", urlAfterRedirects: "/startseite", state: RouterStateSnapshot}
 Router Event: ChildActivationStart
 ChildActivationStart(path: '')

Как вы можете видеть, маршрут запускается, закрывается, перенаправляется на "/", и через много строк authGuard говорит, что он вернул TRUE...

С какой стати роутер не ждет ответа охранников?Откуда происходит «ложное»?Где я ошибся?

Буду признателен за любую помощь, спасибо!

PS: Я уже прочитал вопрос Angular2: Маршрутизатор Событие: NavigationCancel, прежде чем Route Guard разрешит но это не соответствовало моему случаю, потому что пользователь все еще вошел в систему, и я не хочу перенаправлять в охране.

1 Ответ

0 голосов
/ 12 марта 2019

Следуя моим комментариям, вот способ вернуть значение, которое вы хотите: 

if (isLoggedIn) {
  return this.navBarService.getStucture().pipe(
    map(menuRoutes => this.checkRoleAccessAllowed(segments, menuRoutes)),
    tap(value => console.log('AuthGuard.canLoad() - return ' + value + ' for route ' + route.path))
  );
}
...