1
votes

Stockage local angulaire 7

J'ai parcouru le Web et j'ai trouvé que la meilleure façon d'utiliser le stockage local est de l'avoir dans un service J'ai un contrôleur de connexion qui envoie un jeton API et des détails utilisateur dans sa réponse Je suis en train de définir ces détails dans le stockage local et alors j'utilise un routeur angulaire pour accéder à mon tableau de bord dans l'en-tête.J'obtiens le stockage local défini mais le DOM ne se met pas à jour.Je pense que si je m'abonne au service de stockage local, il se mettra à jour mais ti ne fonctionne pas moi dans la bonne direction pour ce que je dois faire pour que l'en-tête se mette à jour lorsque l'utilisateur se connecte et dois-je utiliser un autre type de stockage local car il y en a d'autres là-bas Merci d'avance

/*Header HTML*/
<nav class="uk-navbar-container uk-margin nav1" uk-navbar="mode: click" *ngIf="router.url != '/login'">
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav nav1">
      <li class="uk-active nav1"><a href="/dashboard">Dashboard</a></li>
      <li class="nav1"><a href="/form">Create form</a></li>
      <li class="nav1"><a uk-icon="icon: books" href="/books"></a></li>

    </ul>
  </div>
<div class="uk-position-right favBtn">
  <a *ngIf="this.user !== null" uk-icon="icon: user" class="uk-button uk-button-default"style="border:none;">{{user.message}}  {{user.last_name}}</a>
    <a uk-icon="icon: sign-in" *ngIf="this.user == null" href="/login" style="border:none; color:white;">Login</a>
    <div *ngIf="this.user !== null" uk-dropdown="mode: click" class=" uk-width-large" uk-dropdown>
      <hr class="uk-divider-icon uk-width-1-1">
      <div class="uk-child-width-1-1@s" uk-grid>
        <a uk-icon="icon: sign-out" href="/login" (click)="logout()">Logout</a>
      </div>
    </div>
  </div>
</nav>

/*header Component*/
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';
import { Router } from '@angular/router';
import { LocalStorageService } from '../../global-services/localstorage.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  user: any;

    constructor(
              private Shared: SharedService,
              private router: Router,
              private local: LocalStorageService) { }
  fave: any;
    ngOnInit() {
      this.getLocal();
    }
    getLocal() {
        this.local.getLocal().subscribe(
          data => {
            this.user = data;
          }
        );


    }
    logout() {
      this.local.logout();
    }
}
/*LocalStorage Service*/
import { Injectable, OnDestroy } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {

    setLocal(user) {
      return localStorage.getItem(user);

    }
    getLocal() {
      return localStorage.getItem('user')
    }

    logout() {
    return localStorage.removeItem('user');
    }
}
/* Login Component*/
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../login.service';
import { Router } from '@angular/router';
import { LocalStorageService } from '../../global-services/localstorage.service'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(
    private api: LoginService,
    private router: Router,
    private local: LocalStorageService) { }
/*Vars*/
  user: any;
  email: string;
  password: string;

  ngOnInit() {
  }
  onSubmit() {
    this.api.login(this.email, this.password).subscribe(
      data => {
        this.user = data;
        localStorage.setItem('api_token', this.user.api_token),
        localStorage.setItem('user', JSON.stringify(this.user));
        this.router.navigateByUrl('/dashboard');
      }
    );
    this.local.setLocal(this.user);
  }
}

Toute aide serait grandement appréciée

typescript angular

0 commentaires

3 Réponses :

3
votes

LocalStorage ne vous fournit aucun flux. Ce ne sont que des valeurs statiques. Si vous utilisez ce service correctement (votre application partage une de ses instances), il suffirait probablement de renvoyer la valeur de localStorage:

setLocal(user) {
      return localStorage.getItem(user);

p.s. aussi d'autres méthodes n'ont pas de sens, par exemple :

getLocal() {
  this.user = this.local.getLocal();

pas getItem , mais setItem
Pas besoin de le retourner

2 commentaires

Oh désolé pour le mauvais code et les retours J'essayais d'utiliser un abonnement, je pensais que cela fonctionnerait mais je ne savais pas que ce n'était pas un flux

Merci, j'ai dû analyser les données d'abord, cela fonctionne maintenant

0
votes

Dans votre LoginService, je créerais une variable isLoggedIn = false . Définissez ceci sur true dans votre abonnement avant d'accéder au tableau de bord.

...
this.api.isLoggedIn = true;
this.router.navigateByUrl('/dashboard');

Maintenant, dans votre HeaderComponent, importez également votre LoginService. Vous avez donc accès à cette variable.

Au lieu de * ngIf = "router.url! = '/ Login'" utilisez * ngIf = "! Api.isLoggedIn "

0 commentaires

0
votes

Vous devez utiliser EventEmitter pour refléter instantanément votre statut de connexion. Voici le détail de l'utilisation de https://angular.io/api/core/EventEmitter

Exemple

import { Injectable, Output, EventEmitter } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class BaseService {
  @Output() isLoggedin: EventEmitter<any> = new EventEmitter();
  authenticate(data:any){
    this.http.post(path,data).subscribe( (res:any) => {
      console.log(res)
      if(res.status == "success")
      {
        this.isLoggedin.emit(true);
      }
    });
  }
}

Lorsqu'une variable émet une valeur. l'abonné reflétera avec une nouvelle valeur.

0 commentaires