typescript - 类 'NeedAuthGuard' 错误地实现了类 'CanActivate'。您的意思是扩展 'CanActivate' 并将其成员作为子类继承吗？

Question

你好，我是 Angular 6 的新手，我遇到了一个关于提取用户的身份验证问题，如果没有登录就不会进入任何页面，我面临的问题是

Class 'NeedAuthGuard' incorrectly implements class 'CanActivate'. Did you mean to extend 'CanActivate' and inherit its members as a subclass? Type 'NeedAuthGuard' is missing the following properties from type 'CanActivate': path, route [2720]

这是我的代码

           import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { LoginComponent } from '../Component/login/login.component';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})//NeedAuthGuard
export class ServiceTService {
  constructor(
    private http: HttpClient
  ) {
  }
  users: any = { 
    id: String,
    Email:String,
    Password: Number
  };
  getUser(): Observable<any> {
    return this.http.get<any>("http://localhost:3000/users");

  }
}


@Injectable()
export class NeedAuthGuard implements CanActivate {

  constructor(private customerService: LoginComponent, private router: Router)   {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    const redirectUrl = route['/Store'];

    if ( this.customerService.UserIsLogin) {
      return true;
    }
    this.router.navigateByUrl(
      this.router.createUrlTree(
        ['/login'], {
          queryParams: {
            redirectUrl
          }
        }
      )
    );
    return false;
  }
}

-应用程序模块.ts

-服务

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin, DialogOverviewExampleDialog } from './Component/login/login.component';
import { RouterModule, ROUTES, Routes, ActivatedRouteSnapshot } from '@angular/router';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { StoreComponent } from './Component/store/store.component';
import { NAVComponent } from './Component/nav/nav.component';
import { MatDialogModule, MatDialogRef } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NeedAuthGuard } from './Service/service-t.service';
const Router: Routes = [
  { path: "Login", component: LoginComponent, data: { requiresLogin: true } },
  { path: "Store", component: StoreComponent, data: { requiresLogin: true } },
  { path: '**', component: LoginComponent }
]
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    StoreComponent,
    NAVComponent,
    DialogOverviewExampleDialog,
    DialogOverviewExampleDialogPassword,
    DialogOverviewExampleDialogLogin,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(Router)
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DialogOverviewExampleDialog, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin]

})
export class AppModule { }

• 登录组件

  从'@angular/core'导入{Component, OnInit, ViewChild, AfterViewInit, Inject, Injectable};从'../../Service/service-t.service'导入{ServiceTService}；从 '@angular/router' 导入 { RouterModule,Router, ActivatedRouteSnapshot, RouterStateSnapshot};从'@angular/core'导入{指令，ElementRef，输入}；从 'rxjs' 导入 { Observable, Subject };从'@angular/router/src/utils/preactivation'导入{CanActivate}；从'src/app/app.component'导入{AppComponent}；从 '../store/store.component' 导入 { StoreComponent }；从'@angular/material'导入{MatDialog，MatDialogRef，MAT_DIALOG_DATA，MatDialogModule}；从“@angular/animations”导入{状态}；

  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })  
  
  export class LoginComponent implements OnInit   {
    users: any = { 
      id: "",
      Email:"",
      Password:"", 
      requiresLogin: false
    };
    UserIsLogin:boolean = false; 
    constructor(
      private service: ServiceTService,
      private routerT : Router,
      private dialog: MatDialog
    ) {    
    }
    isLogin( Login) :boolean{ 
      this.UserIsLogin= Login;
      return this.UserIsLogin; 
    }
    onSubmit( userLogin) {
       this.service.getUser().subscribe( (result: any) => {
         if(userLogin.Email==""){ this.dialog.open(DialogOverviewExampleDialog, {width: '350px'} )  }
         if(userLogin.Password==''){this.dialog.open(DialogOverviewExampleDialogPassword, {width: '350px'})}
         for (let users of result){
           if( users.Email == userLogin.Email && users.Password == userLogin.Password ){
              alert("currect"); 
             this.isLogin(true);
             return this.routerT.navigate(['/Store']);
             }else {
                    this.dialog.open(DialogOverviewExampleDialogLogin, {width: '350px'})}
                    this.isLogin(false);
                    return false; 
                  }
          });
    }
    ngOnInit() {
    }
  }
  
  @Component({
    selector: 'DialogOverviewExampleDialog',
    templateUrl: 'dialog-Error.html'
  })
  export class DialogOverviewExampleDialog {
  
    constructor(
      public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
      @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  }
  
  @Component({
    selector: 'DialogOverviewExampleDialogPassword',
    templateUrl: 'dialog-Password.html'
  })
  export class DialogOverviewExampleDialogPassword {
  
    constructor(
      public dialogRef: MatDialogRef<DialogOverviewExampleDialogPassword>,
      @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  }
  
  @Component({
    selector: 'DialogOverviewExampleDialogLogin',
    templateUrl: 'dialog-incorrectLogin.html'
  })
  export class DialogOverviewExampleDialogLogin {
  
    constructor(
      public dialogRef: MatDialogRef<DialogOverviewExampleDialogLogin>,
      @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  }
  

Answer 1

我猜你是从错误的路径导入的。不要尝试以这种方式导入 CanActivate:

import { CanActivate } from '@angular/router/src/utils/preactivation';

但是:

import { CanActivate } from '@angular/router';

这样你的导入看起来如下

import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate } from '@angular/router';