Question

您好，我是6号角的新手，我遇到了一个有关身份验证的问题，该身份验证是从没有登录的用户无法进入任何页面中提取用户，而我面临的问题是

“ NeedAuthGuard”类错误地实现了“ CanActivate”类。您是否要扩展“ CanActivate”并将其成员作为子类继承？类型“ NeedAuthGuard”缺少类型“ CanActivate”的以下属性：路径，路由[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'导入{组件，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'导入{state};

@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';

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

1 个答案: