时间戳

首页 > 解决方案 > Angular 防护没有按预期工作

angular - Angular 防护没有按预期工作

问题描述

我正在尝试将新用户（不涉及身份验证）重定向到第一次使用该应用程序的国家/地区选择。我正在使用角度防护，并且我正在延迟加载。我正在检查以下链接：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',
  }
];

教程.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 部分永远运行。

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

标签： angulartypescriptangular8angular-guards

解决方案

我认为问题在于您将其设置在默认路由上。这意味着由于不允许您进入此路线，该应用程序正试图将您引导至默认路线，这是同一条路线，因此您陷入了循环。

推荐阅读