Discussion :

[cyril260390]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[krakatoa]

tu utilises un interceptor ?

regarde dans les modules !

https://efficientcoder.net/angular-1...-interceptors/

[cyril260390]

Non je ne connais pas.
Je vais regarder le lien que tu m'as envoyé et essayer.

[krakatoa]

aaah bizarre
ça ne sert à rien d'essayer si tu ne l'a pas volontairement mis !

dans un module t'as une ligne de ce genre ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }

si oui, tu peux le supprimer !

[cyril260390]

Effectivement j'ai cette ligne dans mon component app.module. Je l'ai donc effacer et j'ai effectué un nouveau test.
J'ai une nouvelle erreur, je suis en train de chercher à quoi cela peut correspondre.

Voici mon erreur Access to XMLHttpRequest at 'http://localhost:8888/login.php' from origin 'http://localhost:4206' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

En cherchant sur le net, j'ai trouvé ce lien https://www.journaldunet.fr/web-tech...-avec-angular/

Donc si je comprend bien, il faut que je rajoute un module pour permettre l'accès CORS

[krakatoa]

les CORS n'est pas un problème coté Angular mais du coté serveur.

en effet, le fournisseur de données (api) doit accepter les requetes provenant du projet angular
donc il faut ajouter coté serveur des CORS
genre j'accepte de communiquer avec la requete provenant de http://....url.... (qui est l'url du projet Angular)

c'est une sécurité, ainsi, si un autre projet n'a pas l'autorisation il ne peut pas recup des données de l'api