Bonjour,

J'ai créé un login avec Angular et Node.js

Je peux désormais récupérer un token dans ma console si les identifiants correspondent à ceux enregistrés dans la BDD.

Cependant, lorsque les utilisateurs cliquent sur 'Connexion', ils ont tous accès à la page 'home'.

Je souhaite donc faire en sorte que si les identifiants correspondent ils puissent accéder à 'Home' en cliquant sur 'Connexion', sinon, une pop up d'alerte leur demandera de vérifier leurs identifiants.

Pouvez-vous, svp, jeter un coup d'oeil à mon code et me dire comment m'y prendre dans mon component svp?

Merci par avance pour votre aide.

<section class="background">
        
                <form class="connexion" [formGroup]="loginForm" (ngSubmit)="f.form.valid && login()" name="form"  #f="ngForm">

                    <mat-form-field>
                        
                        <label for="username">Email</label>
                        <input matInput type="text" formControlName="username" name="username"  required email>
                    
                    </mat-form-field>

                    <mat-form-field>
                        
                        <label for="password">Password</label>
                        <input matInput type="password" formControlName="password" name="password" 
                        required />
                    
                    </mat-form-field>

                    <div>
                        <button mat-raised-button>Connexion</button><br/>
                        <a routerLink='motdepasse' mat-button>Mot de passe oublié?</a>
                    </div>

                </form>
</section>

import {Component, NgModule, OnInit} from '@angular/core';
import {ReactiveFormsModule,  FormControl,  FormGroup,  FormBuilder,  Validators} from '@angular/forms';
import {  userService} from '../services/user.service';
import {  HttpClientModule} from '@angular/common/http';
import {  HttpModule} from '@angular/http';
import {  UserModel} from '../models/user.model';
import {  Router} from '@angular/router';



@NgModule({
  imports: [
    ReactiveFormsModule,
    FormControl,
    FormGroup,
    HttpClientModule,
    HttpModule
  ],
})

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent implements OnInit {
  
  loginForm: FormGroup;
  public error: string;
  submitted = false;

  localUser = {
    username: '',
    password: ''
  }

  constructor(private _userService: userService,
    private _userModel: UserModel,
    private router: Router,
    private formBuilder: FormBuilder) {}

  ngOnInit() {

    //connexion au backend
    this._userService.setUrl();
    this._userService

    //connexion à l'url du site
    /*this._userService.getConfiguration();*/

    //pour la fonction de login
    this.loginForm = this.formBuilder.group({
      username: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });
    this._userService.logout();

  }
  get f() {
    return this.loginForm.controls;
  }



  login() {
    this.submitted = true;


    const val = this.loginForm.value;
    console.log(this.loginForm.value);

    if (val.username && val.password) {

      this._userService.login(val.username, val.password)
        .subscribe((result) => {
          console.log(result);
          if (result) {
            this.router.navigate(['/home']);
          } else {
            alert('Veuillez vérifier vos identifiants');
          }
        });
      
    }
  }

  logout() {
    this._userService.logout();
  }
}

import { Injectable, OnInit } from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/do';
import { Router } from "@angular/router";
import { UserModel } from '../models/user.model';



export const TOKEN_NAME: string = 'jwt_token';

export enum Endpoints {
  login = "/login",
    logout = "/LOGOUT",
    etc = "/ETC"
}

@Injectable()
export class userService implements OnInit {

  private httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };

  //pour connexion au backend
  private configJson: any;
  private configJsonLogin: any;
  private url: string;
  public href: string = "";

  constructor(private http: HttpClient,
    private router: Router,
    private _userModel: UserModel,
    private formBuilder: FormBuilder
  ) {}

  ngOnInit() {
    this.setUrl();
  }

  async setUrl() {
    //connexion au backend
    this.configJson = await this.http.get('../../assets/config.json').toPromise();
    this.url = this.configJson.url;
    console.log(this.url);
  }

  // We are receiving the result of the login call, containing the JWT and the property, and we are passing it directly to the method
  login(username: string, password: string) {
    let user = {
      'username': username,
      'password': password
    }
    return this.http.post(this.url + Endpoints.login, user, this.httpOptions)

  }


  logout() {

  }