我在 Angular 中使用路由防护时遇到错误，错误显示如下，找不到名称"下一步"

Question

我正在使用Angular项目中的路线护罩，并且我正在为Angular Project中的服务组件实施路线护罩。现在，我被一个错误击中，并且将在Visual Studio编辑器中显示这样的错误， ->找不到名称" Next"。
当我尝试在Auth.guard.ts中使用NEXT关键字时，该错误显示了Angular Project。

在auth.guard.ts

中

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  user = {
    role: 'ADMIN'
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    if(user.data[0] == this.user.role)
    return true;
    throw new Error("Method not implemented.");
  }
}

在app-routing.module.ts

中

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ServicesComponent } from './services/services.component';
import { AuthGuard } from './guards/auth.guard';
const routes: Routes = [
  {
    path:'',
    component:HomeComponent
  },
  {
    path:'aboutus',
    component:AboutusComponent
  },
  {
    path:'services',
    component:ServicesComponent,
    canActivate: [AuthGuard],
    data: ['ADMIN']
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在app.module.ts

中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ServicesComponent } from './services/services.component';
import { AuthGuard } from './guards/auth.guard';
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    AboutusComponent,
    ServicesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

替换下一个路由替换，因为您的数据应从ActivatedRoutesNapshot中获取(在您的示例中注射为路由(。

Answer 2

您要搜索的下一个在yout constructor中搜索为" route "。这将对您有用：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  user = {
    role: 'ADMIN'
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    if(route.data[0] == this.user.role){
      return true;
    }
    return false;
  }
}