module authentification / login
Bonjour,
Nouveau dans le monde du développement, je me lance dans un projet personnel pour acquérir dans l'expérience en angular.
J'effectue un projet tout simple notamment un système de login. Mais là je bloque.
Mon service ne fonctionne absolument pas et je ne sais pas ce qui cloche.
J'obtiens cette erreur dans ma console à la validation du formulaire :
"TypeError: this.interceptor.intercept is not a function"
Voici mon code de mes différents components et service
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class="col-8 m-auto">
<form [formGroup]="signinForm" class="d-flex flex-column" (ngSubmit)="onSubmit()">
<div class="form-group w-100">
<label for="username">Username</label>
<input type="username" name="username" class="form-control" autocomplete="off" placeholder="" formControlName="username">
</div>
<div class="form-group w-100">
<label for="Password">Votre mot de passe</label>
<input type="password" class="form-control" name="Password" placeholder="" autocomplete="off" formControlName="password">
</div>
<button type="submit" [disabled]="signinForm.invalid" class="btn btn-primary text-centerw-100">Connexion</button>
</form>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { AuthService } from 'src/app/auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
signinForm: FormGroup;
errorMessage = 'Mail ou mot de passe incorrect';
loading = false;
submitted = false;
constructor(private fb: FormBuilder, private dataService: AuthService, private router: Router, private route: ActivatedRoute,) { }
ngOnInit(): void {
this.signinForm = this.fb.group({
username: ['', [Validators.required]],
password: ['', Validators.required]
});
}
get f() { return this.signinForm.controls }
onSubmit() {
this.submitted = true;
if(this.signinForm.invalid) {
return;
}
this.loading = true;
this.dataService.login(this.f.username.value, this.f.password.value).pipe(first()).subscribe({
next: () => {
const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
this.router.navigateByUrl(returnUrl);
},
error: error => {
console.log(error);
this.loading = false;
}
});
}
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import { Injectable, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from 'src/app/models/users.model';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private userSubject: BehaviorSubject<User>;
public user: Observable<User>;
constructor(private router: Router, private http: HttpClient) {
this.userSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('user')));
this.user = this.userSubject.asObservable();
}
login(username, password) {
return this.http.post<User>(`http://localhost:8888/login.php`, {username, password}).pipe(
map(user => {
localStorage.setItem('partner', JSON.stringify(user));
this.userSubject.next(user);
return user;
})
)
}
} |
Code:
1
2
3
4
5
6
7
8
9
|
export class User {
id: string;
username: string;
password: string;
firstName: string;
lastName: string;
token: string;
} |
Est ce que quelqu'un peut m'aidez ?
