Angular:Ajouter un rôle et gestion de la session
Model: Modifier src/models/Role.js
/*importer le fichier de configuration de connexion à la base de données*/
var connexion = require('./../../config/config');
/*Créer un objet de type Produit*/
var Role = function(role){
this.id = role.id;
this.nom = role.nom;
};
/**1.insert**/
/*Ajouter à l'objet Role la fonction insert qui permet d'ajouter un role dans la table role*/
Role.insert = function (role, result) {
/*role :sera renseigner par le controlleur contenant l'objet à insérer dans la table role
result:un objet qui contiendra la réponse à envoyer au controlleur :RoleController
*/
/*Exécuter la requêtes SQL insert into role*/
connexion.query("INSERT INTO roles set ?", role, function (err, res) {
/*
function (err, res):la méthode de callback sera exécuté aprés l'exécution de la commande insert into
err:contient l'erreur sql reçu
res:contient la reponse de la methode query
*/
/*Si la fonction query délenche une erreur*/
if(err) {
console.log("error: ", err);
result(err, null);
}
/*Si la fonction query s'exécute sans erreur on envoie res.insertId :c'est la valeur de la primary key de l'objet inséré */
else{
console.log(res.insertId);
result(null, res.insertId);
}
});
}
/*Exporter la classe pour pouvoir l'importer dans le controller */
module.exports= Role;
controller: Modifier src/controllers/RoleController.js
const RoleModel = require('../models/Role');
/*Insérer un nouveau role dans la table role*/
exports.insert = (req, res) =>{
const role_nouveau = new RoleModel(req.body);
console.log(req.body);
/*Vérifier si tout les champs sont rempli*/
if(req.body.constructor === Object && Object.keys(req.body).length === 0){
res.send(400).send({success: false, message: 'Erreur tous les champs sont obligatoires'});
}else{
RoleModel.insert(role_nouveau, (err, role)=>{
if(err)
/*si erreur envoyer l'erreur*/
res.send(err);
/*si Ok envoyer un objet json de la forme:
{
status:true;
message:"le role est bien ajouté",
data:id du role inséré
}
*/
res.json({status: true, message: 'Le role est bien ajoute', data: role.insertId})
})
}
}
Routes src/routes/RoleRoutes.js
Ajouter une route sécurisée permettant à un admin connecté d'ajouter un rôle/*importer express js pour manipuler les routes*/
const express = require('express');
/*importer le module Router de express js*/
const routerRoles = express.Router();
/*imporer roleController*/
const roleController = require('../controllers/RoleController');
//sécuriser l'accés à la route ajouter un role
const auth = require('../middleware/auth');
/*la route:=> roles/ajouter ,avec la méthode POST */
//routerRoles.post('/ajouter', roleController.insert);
routerRoles.post('/ajouter', auth.verifyToken, async (req, res) => {
roleController.insert(req,res);
});
module.exports = routerRoles
Server Serveur.js
importer le fichier de routage RoleRoutes.js dans le fichier Serveur.js//importer le fichier de routage pour les roles
const routerRoles = require('./src/routes/RoleRoutes');
/*Créer les apis pour Utiliatuer*/
app.use('/apis/roles/', routerRoles);
services/api.service.ts
Créer la méthode postAdmin permettant d'exécuter la requête HTTP post en envoyant le token de sécuritéimport { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { AuthService } from 'src/app/services/auth.service';
@Injectable({
providedIn: 'root'
})
export class ApiService {
baseUrl = 'http://localhost:8081/apis/';
constructor(private _http: HttpClient,private authService:AuthService) {
}
//permet d'éxécuter une méthode post et retourne le résultat
postAdmin(url:string, param:any) {
//1.récupérer token
const auth_token=this.authService.getToken();
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': `${auth_token}`
})
};
return this._http.post(this.baseUrl+""+url, param,httpOptions).pipe(map(res => {
return res;
}));
}
//permet d'éxécuter une méthode post et retourne le résultat
post(url:string, param:any) {
return this._http.post(this.baseUrl+""+url, param).pipe(map(res => {
return res;
}));
}
//exécuter des get dans le serveur
get(url:string) {
return this._http.get(this.baseUrl+""+url).pipe(map(res => {
return res;
}));
}
}
add-roles.component.ts
import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';
import { ApiService } from './../../services/api.service'
import { AuthService } from './../../services/auth.service'
import { Router } from '@angular/router';
@Component({
selector: 'app-add-roles',
templateUrl: './add-roles.component.html',
styleUrls: ['./add-roles.component.css']
})
export class AddRolesComponent implements OnInit {
isLogin: boolean = false;
status:number=0;
messageStatus:string="";
constructor(
private _api: ApiService,
private _auth: AuthService,
private _router:Router
) { }
//vérifier si l'utilisateur est connecté
ngOnInit() {
this.isUserLogin();
}
//Valider
onSubmit(form: NgForm) {
//.Envoyer les données et le token
this._api.postAdmin('roles/ajouter', form.value).subscribe((res: any) => {
console.log(res);
this.status=res.status;
//1.OK
if (this.status==1) {
this.messageStatus="Roles bien ajouté";
}
//2.Erreur
else {
this.messageStatus="ERREUR :Role non ajouté";
}
})
}
//vérifier si le localStage !=null
isUserLogin(){
if(this._auth.getUserDetails() != null){
this.isLogin = true;
}
}
}
add-roles.component.html
<div class="card text-center " *ngIf = 'this.isLogin'>
<div class="card-header bg-info">
Ajouter un Role
</div>
<div class="card-body">
<h3 *ngIf = 'this.status==0' class="bg-danger">{{this.messageStatus}}</h3>
<h3 *ngIf = 'this.status==1' class="bg-success">{{this.messageStatus}}</h3>
<div class="card-text" *ngIf = 'this.isLogin'>
<form #myform = "ngForm" (ngSubmit) = "onSubmit(myform)" >
<div class = 'form-group' style="padding:5px;">
<input class = 'form-control' type = "text" name = "nom" placeholder = "nom" ngModel>
</div>
<div class = 'form-group' style="padding:5px;">
<input class= 'form-control btn btn-success btn-sm' type = "submit" value = "Valider">
</div>
</form>
</div>
</div>
</div>
app.component.ts
import { Component } from '@angular/core';
import { HttpHeaders, HttpClient} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { AuthService } from 'src/app/services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userinfo:any;
isLogin: boolean = false;
constructor(
private _auth:AuthService,
private http:HttpClient,
private _router:Router
) { }
ngOnInit(): void {
//vérifier si utilisateur est connecté
this.isUserLogin();
}
isUserLogin(){
this.userinfo=this._auth.getUserDetails();
if( this.userinfo!= null){
this.isLogin = true;
this.userinfo=JSON.parse(this.userinfo);
}
}
logout(){
this._auth.clearStorage();
this.userinfo= null;
this.isLogin = false;
this._router.navigate(['/profile']);
}
}
app.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">VenteApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" *ngIf = 'this.isLogin'>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown" *ngIf = 'this.userinfo[0].idRole==1'>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Roles
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="roles/add">Ajouter</a></li>
<li><a class="dropdown-item" href="roles/">Liste</a></li>
</ul>
</li>
<li class="nav-item dropdown" *ngIf = 'this.userinfo[0].idRole==1'>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Utilisateurs
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="utilisateurs/add">Ajouter</a></li>
<li><a class="dropdown-item" href="utilisateurs/">Liste</a></li>
</ul>
</li>
<li class="nav-item dropdown" *ngIf = 'this.isLogin'>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
produits
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="utilisateurs/add" *ngIf = 'this.userinfo[0].idRole==1'>Ajouter</a></li>
<li><a class="dropdown-item" href="utilisateurs/">Liste</a></li>
</ul>
</li>
<li class="nav-item dropdown" *ngIf = 'this.isLogin'>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Ventes
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="utilisateurs/add">Acheter</a></li>
<li><a class="dropdown-item" href="utilisateurs/" *ngIf = 'this.userinfo[0].idRole==1'>Liste</a></li>
</ul>
</li>
</ul>
<div class="d-flex" *ngIf = '!this.isLogin'>
<a class="nav-link" href="/login">Connexion</a>
<a class="nav-link" href="/register">Inscription</a>
</div>
<div class="d-flex" *ngIf = 'this.isLogin'>
<span class="nav-link" href="/register">Welcome: {{this.userinfo[0].nom}}</span>
<button type="button" class="btn btn-danger btn-sm" (click) = 'logout()' >logout</button>
</div>
</div>
</div>
</nav>
<router-outlet></router-outlet>
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/components/login/login.component';
import { RegisterComponent } from './auth/components/register/register.component';
import { ProfileComponent } from './components/profile/profile.component';
import { AddRolesComponent } from './components/add-roles/add-roles.component';
import { AuthGuardService } from './services/auth-guard.service';
const routes: Routes = [
//les routes publiques
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
//une route privé controllé par AuthGuardService
{path: 'profile', canActivate: [AuthGuardService], component: ProfileComponent},
{path: 'roles/add', canActivate: [AuthGuardService], component: AddRolesComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms'
import { AuthModule } from './auth/auth/auth.module';
import { ProfileComponent } from './components/profile/profile.component';
import { AddRolesComponent } from './components/add-roles/add-roles.component';
@NgModule({
declarations: [
AppComponent,
ProfileComponent,
AddRolesComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
AuthModule,
ReactiveFormsModule,
FormsModule,
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }