Angular7: CanLoad Auth guard вешает браузер

Question

Я создал службу AuthGuard и реализовал интерфейс CanLoad, как показано ниже

import { Injectable } from '@angular/core';
import { CanLoad, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanLoad {
  constructor(private router: Router) { }

  canLoad() {
    if (localStorage.getItem('isLoggedin')) {
      return true;
    }
    this.router.navigate(['/auth/login']);
    return false;
  }
}

Ниже мой модуль маршрутизации приложений

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './shared/guard/auth.guard';

const routes: Routes = [
  { path: '', loadChildren: './layout/layout.module#LayoutModule', canLoad: [AuthGuard] },
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
  { path: '**', redirectTo: 'not-found' }
];

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

Когда я проверяю вкладку сети браузера, файлы не загружаются, и я вижу пустую белую страницу, а в браузере отображается предупреждение

platform-browser.js:613 Throttling navigation to prevent the browser from hanging. See https://crbug.com/882238. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

Answer 1

Наконец-то решена проблема, просто нужно было переупорядочить по маршрутам, как показано ниже

const routes: Routes = [
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
  {
    path: '', loadChildren: './layout/layout.module#LayoutModule', canLoad: [AuthGuard],
  },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
  { path: '**', redirectTo: 'not-found' }
];

Answer 2

В вашем коде есть проблемы. Guard используется только для проверки, есть ли у вас разрешение на доступ к этому маршруту или нет, поэтому не рекомендуется перенаправлять пользователя на другой маршрут в Guard.

Вы должны реализовать интерфейс CanActivate, а не интерфейс CanLoad

Таким образом, ваш код должен измениться в этом

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) { }

  canActivate() {
    if (localStorage.getItem('isLoggedin')) {
      return true;
    }
    return false;
  }
}

Answer 3

Проблема в том, что по умолчанию pathMatch установлен на 'prefix'и это означает, что каждый путь будет соответствовать пустому пути на маршруте, который ведет к этому модулю. Возможные исправления: установкаpathMatch: 'full', нравится:

{ path: '', loadChildren: './layout/layout.module#LayoutModule', pathMatch: 'full', canLoad: [AuthGuard], },

или измените порядок маршрутов, как вы уже выяснили в своем ответе.