web-dev-qa-db-fra.com

Angular2 cookies au lieu de stockage local

J'ai réussi à faire fonctionner tout l'authentification JWT, pas de problème, mais cela ne prend en charge que les navigateurs modernes, et j'ai besoin qu'Auth fonctionne dans toutes les versions, à partir d'IE9.

Je n'ai trouvé aucune information ni exemple sur l'utilisation des cookies dans Angular2. Il existe un exemple simple d'utilisation de localStorage pour l'enregistrement d'un jeton. J'ai besoin des mêmes fonctionnalités, mais avec des cookies.

Toute aide serait formidable, car il n’ya rien à ce sujet sur le net.

this.http.post("http://localhost:3001/sessions/create", creds, { headers: header })
    .map(res => res.json())
    .subscribe(
      data => localStorage.setItem('id_token',data.id_token),
      err => this.logError(err),
      () => console.log("Auth is completed!")
    );
javascripthtml5cookiesangular
20
Milan Milanovic

Un moyen simple de résoudre ce problème est d'utiliser cette bibliothèque:

https://www.npmjs.com/package/ng2-cookies

Pour installer cette bibliothèque, lancez:

$ npm install ng2-cookies

Usage:

import { Cookie } from 'ng2-cookies/ng2-cookies';

Cookie.set('cookieName', 'cookieValue');
Cookie.set('cookieName', 'cookieValue', 10 /*days from now*/);
Cookie.set('cookieName', 'cookieValue', 10, '/myapp/', 'mydomain.com');

let myCookie = Cookie.get('cookieName');

/*
* List of cookies as Object, like: { cookieName: "cookieValue", cookieName2: "cookieValue2" ... etc }
*/
let cookielist = Cookie.getAll();

Cookie.delete('cookieName');
Cookie.deleteAll();
30
Exdcarca

J'ai implémenté le service de cookies avec les fonctions de Angular 1 à Angular 2 en tant que service injectable. Également ajouté une fonction removeAll comme un plus. Vous pouvez l'obtenir avec:

npm install angular2-cookie --save

Après l'avoir injecté en tant que service, vous pouvez utiliser les méthodes décrites dans Angular 1:

this._cookieService.get(key);
this._cookieService.getObject(key);
// Other available methods are
// put(), putObject(), remove() and removeAll()

Vous pouvez consulter la partie readme pour des exemples et des fonctions disponibles.

https://github.com/salemdar/angular2-cookie

4
s.alem

Pour utiliser le cookie dans la première exécution angulaire de la commande npm, npm install angular2-cookie --save,
Après avoir injecté votre service dans app.module.ts, ajoutez 

import { CookieService } from 'angular2-cookie/services/cookies.service';

ou ajouter un service dans le fournisseur,

 providers: [CookieService]

après avoir ajouté un cookie à votre composant où vous avez utilisé il existe 7 méthodes pour les cookies 
1.) get():- This method returns the value of given cookie key.
2.) getObject() :- This method is returns the desterilized value of given cookie key.
3.) get all():- This method returns a key-value object with all the cookies.
4.) put():- This method is used to set a value for given cookie key.
5.) putObject():- This method is used to serializes and set a value for given cookie key.
6.) remove(): -This method is used to remove given cookie.
7.) remove all(): -This method is used to remove all cookies.

pour mettre/définir la valeur dans un cookie: this._cookieService.put('key:string', 'value:string'); here clé comme nom de cookie ex: user1 et la valeur correspond à set any value.

pour obtenir une valeur dans un cookie: this._cookieService.get('key');

pour supprimer le cookie du composant, puis this._cookieService.remove('key');

1
Brijesh Mavani