Здравствуйте, я новичок в angular 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
-service
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 { }
компонент входа
import {Component, OnInit, ViewChild, AfterViewInit, Inject, Injectable} из '@ angular / core';
импортировать {ServiceTService} из '../../Service/service-t.service';
импортировать {RouterModule, Router, ActivatedRouteSnapshot, RouterStateSnapshot} из '@ angular / router';
import {Directive, ElementRef, Input} из '@ angular / core';
import {Observable, Subject} из 'rxjs';
импортировать {CanActivate} из '@ angular / router / src / utils / preactivation';
импортировать {AppComponent} из 'src / app / app.component';
импортировать {StoreComponent} из '../store/store.component';
импортировать {MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogModule} из '@ angular / material';
import {state} из '@ 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();
}
}