node.js - Angular CanActivate Guard 错误

Question

我在 app.module.ts 上收到此错误消息

[ts] 类型 '({ path: string; component: typeof LoginComponent; } | { path: string; canActivate: (typeof AuthG...' 不可分配给类型'Route[]'。类型'{ path: string; component: typeof LoginComponent; } | { path: string; canActivate: (typeof AuthGu...' 不能分配给类型'Route'。类型'{ path: string; canActivate: (typeof AuthGuard)[]; component: typeof HeaderComponent ; }' 不可分配给类型 'Route'。对象字面量只能指定已知属性，但类型 'Route' 中不存在 'canActivate'。你的意思是写 'canDeactivate' 吗？

我检查了我的保护文件，没有发生错误。但是在我的 app.module.ts 中，返回一个这样的错误。这是我的 AuthGuard ：

import { Injectable } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';

class Permissions{
  canActivate(user, token):boolean{
    return true;
  }
}

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private permissions : Permissions,
    private router: Router,
    private authService: AuthService,
){}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    let user;
    let token;
    let level;
    if (this.authService.loggedIn(user, token, level)) {
      return true;
    }else{
      this.router.navigate(['/']);
      console.log('Please login first.');
      return false;
    }
  }
}

这是我的 app.module.ts 文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '../material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, Validators } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { ValidateService } from '../services/validate.service';
import { AuthService } from '../services/auth.service';
import { CompanyService } from '../services/company.service';
import { AuthGuard } from './guards/auth.guard';
import { FlashMessageModule } from 'angular-flash-message';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HeaderComponent } from './templates/header/header.component';
import { FooterComponent } from './templates/footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { DataTracerComponent } from './data-tracer/data-tracer.component';
import { LoggedInComponent } from './snackbar/logged-in/logged-in.component';
import { IndexCompanyComponent } from './company/index-company/index-company.component';
import { CreateCompanyComponent } from './company/create-company/create-company.component';
import { ViewCompanyComponent } from './company/view-company/view-company.component';
import { UpdateCompanyComponent } from './company/update-company/update-company.component';
import { AdminIndexComponent } from './admin/admin-index/admin-index.component';
import { AdminSidenavComponent } from './templates/admin-sidenav/admin-sidenav.component';
import { AdminUsersComponent } from './admin/admin-users/admin-users.component';
import { AdminCompaniesComponent } from './admin/admin-companies/admin-companies.component';
import { AdminReportComponent } from './admin/admin-report/admin-report.component';
import { AdminGuard } from './guards/admin.guard';

const appRoutes:Routes =[
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'header',
    canActivate: [AuthGuard],
    component: HeaderComponent
  },
  {
    path: 'admin',
    canActivate: [AuthGuard, AdminGuard],
    component: AdminIndexComponent
  },
  {
    path: 'admin/users',
    canActivate: [AuthGuard, AdminGuard],
    component: AdminUsersComponent
  },
  {
    path: 'dashboard',
    canActivate: [AuthGuard],
    component: DashboardComponent 
  },
  {
    path: 'profile',
    canActivate: [AuthGuard],
    component: ProfileComponent
  },
  {
    path: 'data-tracer',
    canActivate: [AuthGuard],
    component: DataTracerComponent
  },
  {
    path: 'company',
    canActivate: [AuthGuard],
    component: IndexCompanyComponent
  },
  {
    path: 'company/addCompany',
    canActivate: [AuthGuard],
    component: CreateCompanyComponent
  },
  {
    path: 'company/updateCompany/:id',
    canActivate: [AuthGuard],
    component: UpdateCompanyComponent
  },
  {
    path: 'companies/:id',
    canActivate: [AuthGuard],
    component: ViewCompanyComponent
  }
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    DashboardComponent,
    ProfileComponent,
    DataTracerComponent,
    LoggedInComponent,
    IndexCompanyComponent,
    CreateCompanyComponent,
    ViewCompanyComponent,
    UpdateCompanyComponent,
    AdminIndexComponent,
    AdminSidenavComponent,
    AdminUsersComponent,
    AdminCompaniesComponent,
    AdminReportComponent,
  ],

  imports: [
    HttpModule,
    HttpClientModule,
    FlashMessageModule,
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
  ],
  providers: [ValidateService, AuthService, AuthGuard, AdminGuard, CompanyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： node.jsangularmean