Angular 防护没有按预期工作答案

【问题标题】：Angular guards isn't working as supposed toAngular 防护没有按预期工作
【发布时间】：2019-08-29 20:27:44
【问题描述】：

我正在尝试将新用户（不涉及身份验证）重定向到第一次使用该应用程序的国家/地区选择。我正在使用角度防护，并且我正在延迟加载。我正在检查以下链接：https://angularfirebase.com/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/。然而问题是，因为我是延迟加载，所以我尝试如下实现它。

app.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { TutorialGuard } from './guards/tutorial.guard';

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule', 
canActivate: [TutorialGuard]},
]

主页，它是主页和收藏页面的父页面

    const routes: Routes = [
  {
    path: 'main',
    component: MainPage,
    children: [
       { path: 'home', loadChildren: '../home/home.module#HomePageModule' 
},
      { path: 'favorites', loadChildren: 
'../favorites/favorites.module#FavoritesPageModule' },
      { path: 'country-selection', loadChildren: '../country- 
   selection/country-selection.module#CountrySelectionPageModule' },

    ]
  },
  {
    path: '',
    redirectTo: '/main/home',
  }
];

tutorial.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router 
} from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class TutorialGuard implements CanActivate  {
  constructor(private storage: Storage, private router: Router) {}

  async canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {

    const isComplete = await this.storage.get('tutorialComplete');
    console.log('is storage complete?', isComplete);

    if (!isComplete) {
      this.router.navigateByUrl('main/country-selection');
    console.log('the tutorial is not complete');
    }

    return isComplete;
  }
}

编译后屏幕变白，我在tutorial.guard.ts中提到的console.log部分永远运行。

你能告诉我我做错了什么吗？

【问题讨论】：

标签： angular typescript angular8 angular-guards

【解决方案1】：

我认为问题在于您将其设置在默认路由上。这意味着，由于不允许您进入此路线，因此应用程序会尝试将您引导至默认路线，即相同的路线，因此您陷入了循环。

【讨论】：

【解决方案2】：

您在这两个地方都提到了根模块作为主页模块。所以这是一个无限循环，它变成了一个空白循环。注意：当您使用延迟加载模块时，请使用 canLoad() 而不是 canActivate()。

App.module.ts

const routes: Routes = [
{ path: '', loadChildren: './pages/main/main.module#MainPageModule', 
canActivate: [TutorialGuard]},
]

主页：

  {
    path: '',
    redirectTo: '/main/home',
  }

【讨论】：

你不需要在 app.module.ts 中定义常量路由。在导入上添加以下 RouterModule.forRoot(TutorialGuard,{ useHash: true })