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?
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() {
}
Angular - login this.router.navigate
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.