Class 'NeedAuthGuard' 错误地实现了 class 'CanActivate'。您是要扩展 'CanActivate' 并将其成员作为子 class 继承吗？

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;
  }
}

- app.module.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';

Class 'NeedAuthGuard' 错误地实现了 class 'CanActivate'。您是要扩展 'CanActivate' 并将其成员作为子 class 继承吗？

Class 'NeedAuthGuard' incorrectly implements class 'CanActivate'. Did you mean to extend 'CanActivate' and inherit its members as a subclass?

typescript

angular6

angular7