Angular e Laravel: realizzare un sistema di autenticazione

Category: angular, blog, laravel
12.370 views Tempo di lettura: 75 minuti

Angular e Laravel: modifica di un user

Nelle precedenti sezioni siamo riusciti ad autenticarci, quindi effettuare l’accesso. Comunque il nostro CRUD ancora è incompleto, quindi cosa aspettate? Implementiamolo!!

Iniziamo con il dare la possibilità agli utenti di modificare gli user presenti nel pannello amministrativo, realizzate il component:

ng g c admin/admin-user-edit -is

bene ora non ci resta che aggiungere il parametro relativo alla route.

Parametri del percorso

I parametri di percorso ci consentono di passare valori dal nostro URL al nostro componente in modo da poter modificare dinamicamente il contenuto della nostra vista. Ad esempio, se volessimo modificare l’ user 1 , potremmo visitare /admin/ user/edit/1 . Se vogliamo modificare l’ immagine 2 , possiamo visitare / admin / images / edit / 2 .

Come vedi, sostituendo qualsiasi numero nel nostro URL, possiamo visualizzare un contenuto di visualizzazione diverso.

Suggerimento: se stai lavorando con Laravel o altri framework, questo dovrebbe essere un concetto di base, giusto?

In questa sezione impareremo come visualizzare pagine diverse (visualizza contenuto) in base all’URL.

Innanzitutto, apri admin/admin.routes.ts e aggiungi questo percorso:

export const adminRoutes: Routes = [
  { path: '', component: HomeAdminComponent},
  {path: 'users', component: ListAdminComponent},
  { path: 'users/create', component: AdminUserCreateComponent},
  { path: 'users/edit/:id', component: AdminUserEditComponent }
];

ricordati di importarlo:

import {AdminUserEditComponent} from './admin-user-edit/admin-user-edit.component';

Come vedi, usiamo users/edit/:id . Il ‘:’ indica che si tratta di un parametro di percorso, e Angular dovrebbe ottenere questo id dall’URL.

Quindi, come otteniamo questo parametro di percorso (id)?

Apri admin-user-edit.component.ts e trova:

export class AdminUserEditComponent implements OnInit {

aggiungi di seguito:

id: any;
params: any;

Creiamo due variabili: id e params .

Nota: puoi usare nomi diversi se lo desideri.

Dopodiché, inseriamo ActivatedRoute da @ angular/router nel nostro componente.

constructor(private activatedRoute: ActivatedRoute) { }

Non dimenticare di importare ActivateRoute :

import {ActivatedRoute} from '@angular/router';

Ecco come otteniamo l’ id della pagina:

ngOnInit(): void {
  this.params = this.activatedRoute.params.subscribe(params => this.id = params.id);
}

Fondamentalmente, quando si usa activRoute , i parametri vengono inseriti in un Observable . Ci iscriviamo a quell’osservabile utilizzando:

this.activatedRoute.params.subscribe()

Quando il percorso cambia, lo sapremo immediatamente. Possiamo prendere il valore (che è l’ id ) usando params.id e assegnarlo alla nostra variabile id :

params => this.id = params.id

Inoltre, per evitare perdite di memoria, dovremmo annullare la sottoscrizione dei parametri quando il nostro componente viene distrutto.

Trova:

ngOnInit(): void {
  this.params = this.activatedRoute.params.subscribe(params => this.id = params.id);
}

aggiungi sotto:

ngOnDestroy():void {
  this.params.unsubscribe();
}

Trova:

export class AdminImageEditComponent implements OnInit {

aggiorna a:

export class AdminImageEditComponent implements OnInit, OnDestroy {

importalo:

import {Component, OnInit, OnDestroy} from '@angular/core';

Ecco il nuovo admin/user-image-edit.component.ts :

import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-admin-user-edit',
  template: `
    <p>
      admin-user-edit works!
    </p>
  `,
  styles: [
  ]
})
export class AdminUserEditComponent implements OnInit, OnDestroy {
  id: any;
  params: any;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.params = this.activatedRoute.params.subscribe(params => this.id = params.id);
  }
  ngOnDestroy(): void {
    this.params.unsubscribe();
  }

}

Infine  trova:

<p>
  admin-user-edit works!
</p>

Aggiungi sotto:

<p>The id of this page is: {{id}}.</p>

Usiamo {{id}}per visualizzare l’id della pagina.

A questo punto, visitando http:// localhost:4200/admin/users/edit/2 , dovremmo vedere:

Prova a cambiare l’ID dell’URL!

Quando abbiamo l’ id , possiamo inviare una richiesta alla nostra API ed ottenere i dati relativi ad essa.

Ottenere un signolo utente con  Laravel

Non abbiamo ancora un’API per ottenere un singolo user, quindi creiamola.

Apri UserController.php e aggiorna il metodo show come segue:

public function show($id)
{
    $user = User::find($id);

    if(!$user){
        return Response::json([
            'error' => [
                'message' => "Cannot find the image."
            ]
        ], 404);
    }

    return Response::json($user, 200);
}

Innanzitutto, troveremo l’user in base al suo ID:

$user = User::find($id);

Se non riusciamo a trovarlo, ti invieremo un messaggio di errore:

if(!$user){
    return Response::json([
        'error' => [
            'message' => "Cannot find the image."
        ]
    ], 404);
}

Se l’user viene trovato, dovremmo vedere la risposta 200 e i dati dello stesso:

return Response::json($user, 200);

Aggiornare un User con Laravel

Come avrai intuito, abbiamo anche bisogno di un’API per aggiornare un User.

Apri UserController.php e aggiorna il metodo Update:

public function update(Request $request)
   {
       if ((!$request->name) || (!$request->email) || (!$request->password)) {

           $response = Response::json([
               'message' => 'Please enter all required fields'
           ], 422);
           return $response;
       }

       $user = User::find($request->id);

       if($user){
           return Response::json([
               'message' => "Cannot find the image."
           ], 404);
       }

       $user->name = trim($request->name);
       $user->email = trim($request->email);
       $user->password= bcrypt($request->title);
       $user->save();

       $message = 'Your image has been updated successfully';

       $response = Response::json([
           'message' => $message,
           'data' => $user,
       ], 201);

       return $response;
   }

Proprio come quando creiamo un user, controlliamo prima la richiesta per assicurarci che tutte le informazioni siano corrette:

if ((!$request->name) || (!$request->email) || (!$request->password)) {

    $response = Response::json([
        'message' => 'Please enter all required fields'
    ], 422);
    return $response;
}

Dopodiché, troveremo l’User, in base all’ID richiesto :

$user = User::find($request->id);

Se non riusciamo a trovare l’User, restituiremo un errore:

if($user){
    return Response::json([
        'message' => "Cannot find the image."
    ], 404);
}

Se tutto va bene, aggiorneremo l’immagine e restituiremo la risposta 201 :

$user->name = trim($request->name);
$user->email = trim($request->email);
$user->password= bcrypt($request->title);
$user->save();

$message = 'Your image has been updated successfully';

$response = Response::json([
    'message' => $message,
    'data' => $user,
], 201);

return $response;

Angular: Ottenere un singolo Utente

Quando si modifica un’ utente, dobbiamo inviare una richiesta al nostro backend per ottenere i dati dello stesso, in modo da poter visualizzare le informazioni sul nostro modulo di modifica.

Innanzitutto, aggiungiamo un metodo getUser nel nostro  :

services/user.services.ts

getUser(id: any): Observable<any> {
  return this.http.get(`${API}${id}`)
    .pipe(map((response) => response));
}

Questo metodo è semplice, invia una richiesta a http://127.0.0.1:8000/api/v1/users/USERID per ottenere i dati dello stesso.

Quindi, apri admin-user-edit.component.ts e trova:

this.params = this.activatedRoute.params.subscribe(params => this.id = params['id']);

aggiungi sotto:

this.userService.getUser(this.id).subscribe(
  data => {
    console.log(data);
  },
  error =>  console.log(error));

importa:

import {UserService} from '../../services/user.service';

iniettalo nel costruttore:

constructor(private activatedRoute: ActivatedRoute, private userService: UserService) { }

ora provalo su http://localhost:4200/admin/users/edit/1

Suggerimento: invece di mostrare un modulo Modifica user , possiamo utilizzare questa tecnica per mostrare un singolo user quindi il suo dettaglio.

È ora di utilizzare i dati per visualizzare i valori predefiniti dei campi!

Introduzione al two-way binding

Cos’è il two-way binding?

Secondo W3Schools:

two-way binding(collegamento a due vie). Il data binding in Angular è la sincronizzazione tra il modello e la vista. Quando i dati nel modello cambiano, la vista riflette la modifica e quando i dati nella vista cambiano, anche il modello viene aggiornato.

In poche parole, possiamo creare un modello user ed  associarlo al modulo. Quando modifichiamo i dati del modello  , il nostro modulo verrà aggiornato e quando lo modificheremo , verrà aggiornato anche il nostro modello User .

Non preoccuparti se non hai ancora capito il concetto. Ti mostrerò presto come utilizzare l’associazione a due vie.

Innanzitutto, apri admin-user-edit.component.ts e trova:

constructor(private activatedRoute: ActivatedRoute, private userService: UserService) { }

aggiungi sopra:

user = new User('id', 'name' , 'email' , 'password');

assiurati di importare:

import {User} from '../../models/user';

Ecco come assegniamo i nostri dati richiesti all’ User che abbiamo appena creato:

Trova:

this.userService.getUser(this.id).subscribe(
  data => {
    console.log(data);

aggiungi sotto:

this.user.name = data[`name`];
this.user.email = data[`email`];
this.user.password = data[`password`];

Procediamo per associare il nostro modello user al modulo. Apri admin-user-edit.component.ts , trova:

<p>
  admin-user-edit works!
</p>
<p>The id of this page is: {{id}}.</p>

ed aggiornalo come segue:

<div class="container">
      <div class="col-md-12">
        <div>
          <a [routerLink]="['/admin/']" class="btn btn-light"> Back</a>
        </div>
      </div>

      <div class="col-md-12">
        <div class="card card-body bg-light">
          <form novalidate class="form-horizontal" (ngSubmit)="updateUser(user)" #editUserForm="ngForm">
            <h3 class="card-title">Updating: {{user.name}}</h3>
            <div class="form-group">
              <label for="name" class="col-lg-2 control-label">Name</label>
              <div class="col-lg-12">
                <input
                  type="text"
                  class="form-control"
                  id="name"
                  name="name"
                  placeholder="inserisci il nome"
                  [(ngModel)]="user.name"
                  #name="ngModel"
                  required minlength="3">
                <div *ngIf="name.errors?.required && name.touched" class="alert alert-danger">
                  Name is required
                </div>
                <div *ngIf="name.errors?.minlength && name.touched" class="alert alert-danger">
                  Minimum of 3 characters
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="col-lg-2 control-label">Email</label>
              <div class="col-lg-12">
                <input
                  type="email"
                  class="form-control"
                  id="email" name="email"
                  placeholder="Email"
                  [(ngModel)]="user.email"
                  #email="ngModel" required
                  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                <div *ngIf="email.errors?.required && email.touched" class="alert alert-danger">
                  Email is required
                </div>
                <div *ngIf="email.errors?.pattern && email.touched" class="alert alert-danger">
                  This is not a valid Email!!!
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="title" class="col-lg-2 control-label">Password</label>
              <div class="col-lg-12">
                <input
                  type="password"
                  class="form-control"
                  id="password"
                  name="password"
                  placeholder="Inserisci la Password"
                  [(ngModel)]="user.password"
                  #password="ngModel" required
                  [pattern]="selectedPattern">
                <div *ngIf="password.errors?.required" class="alert alert-danger">
                  Password obbligatoria
                </div>
                <div *ngIf="password.errors&&password.errors.pattern" class="alert alert-danger">
                  {{errorMgs}}
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="title" class="col-lg-2 control-label">Confirm Password</label>
              <div class="col-lg-12">
                <input
                  type="password"
                  class="form-control"
                  id="confirmPassword"
                  name="confirmPassword"
                  placeholder="Inserisci la Password"
                  [(ngModel)]="confirmPassword"
                  #password="ngModel" required>
                <div *ngIf="password.touched && confirmPassword !== user.password" class="alert alert-danger">
                  Le password non corrispondono!!!
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-lg-12">
                <a [routerLink]="['/admin/']" class="btn btn-light"> Cancel</a>
                <button type="submit" class="btn btn-primary" [disabled]="editUserForm.invalid">Update</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

 

in questo caso utilizzo un form driven-template ed effettuo anche qui i controlli di prassi relativi all’inserimento di un corretto formato email, una password dove si chiede un certo formato (numeri, lettere maiuscole, minuscole ed almeno un carattere speciale).

Infine effettuo un confronto delle due password.

ora implementate il metodo updateUser() come segue:

updateUser(user): void {
  this.userService.updateUser(user)
    .subscribe(
      response  => {
        this.user = response;
        console.log(this.user);
      },
      error =>  console.log(error));
}

quindi aprite services/user-service.ts ed aggiungete il metodo updateUser come segue:

// UPDATE USER
updateUser(user: User): Observable<any> {
const url = `${API}${user[`id`]}`;
return this.http.put(`${url}`, user)
.pipe(
map((response) => response),
catchError(this.errorHandler)
);
}