Angular JWT User Authentication-Version2
Angular JWT User Authentication-Version2
Login
Créer le module
Créer le composant
ng g c authentification/login
Créer la classe
Créer le service
@Injectable({
providedIn: 'root'
})
export class AuthService {
private baseurl="http://localhost:3001/api/users"
constructor(private http: HttpClient, public router: Router) { }
// Sign-up
signUp(user: User): Observable<any> {
},
error: (e:any) => {
console.log(e);
alert("Error !")
},
complete: () => {
this.router.navigate(['products']);
}
});
}
getToken() {
return localStorage.getItem('access_token');
}
getisLoggedIn(): boolean {
let authToken = localStorage.getItem('access_token');
return authToken !== null ? true : false;
}
doLogout() {
let removeToken = localStorage.removeItem('access_token');
if (removeToken == null) {
this.router.navigate(['login']);
}
}
this.router.navigate(['login']);
}))}
Fichier register.component.html
<div>
<button type="submit" class="btn btn-success">Enregistrer</button>
</div>
</form>
@NgModule({
declarations: [
LoginComponent
],
imports: [
CommonModule,
AuthentificationRoutingModule,
FormsModule,
]
})
export class AuthentificationModule { }
Fichier Authentification-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegisterComponent } from './register/register.component';
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AuthentificationRoutingModule { }
ng g c authentification/login --skip-tests
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(public authService: AuthService,public router: Router){}
email:string=''
password:string=''
loginUser() {
const userlogin={
email:this.email,
password:this.password
}
this.authService.signIn(userlogin);
}
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AuthentificationRoutingModule { }
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ProductsModule,
AuthentificationModule
],
Logout
src >app>logout
ng g c authentification/logout --skip-tests
fichier Logout.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-logout',
templateUrl: './logout.component.html',
styleUrls: ['./logout.component.css']
})
export class LogoutComponent {
constructor(public authService: AuthService) { }
ngOnInit(){
this.logout()
}
logout() {
this.authService.doLogout()
}
return true;
};
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductsRoutingModule { }
Refresh Token
@Injectable({
providedIn: 'root'
})
export class AuthService {
// Error
handleError(error: HttpErrorResponse) {
let msg = '';
if (error.error instanceof ErrorEvent) {
// client-side error
msg = error.error.message;
} else {
// server-side error
msg = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
return throwError(msg);
}
//refresh
refreshToken(token: string) {
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
return this.http.post(`${this.endpoint}/users/refreshToken/`, {
refreshToken: token
}, httpOptions);
}
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
return throwError(error);
}));
}
this.authService.doLogout();
return throwError(err);
})
);
}
return this.refreshTokenSubject.pipe(
filter(token => token !== null),
take(1),
switchMap((token) => next.handle(this.addTokenHeader(request,
token)))
);
}
On voit l’erreur de code 403 qui invoque la requête de RefreshToken et génère le nouveau token. Ce
qui permet d’afficher la liste des produits avec l’autorisation du nouveau token.