web-dev-qa-db-fra.com

Angular 2 - Quel est le meilleur moyen de stocker des variables globales telles que le jeton d'authentification afin que toutes les classes y aient accès?

Angular 2 question seulement:

Quel est le meilleur moyen de stocker des variables globales telles que le jeton d'authentification ou l'URL de base (paramètres d'environnement) afin que toutes les classes puissent y accéder sans les perdre lors de l'actualisation?

Donc, quand je me connecte, je vais donner à l'utilisateur un jeton d'authentification et le stocker normalement dans le $ rootscope pour angular 1.x.

19
AngularM

À mon avis, stocker un paramètre comme celui-ci sur une variable globale telle que $ rootScope est considéré comme une mauvaise pratique. Sur Angular 1.x, vous devez utiliser un service (singelton) pour extraire ces données de partout. Ainsi, vos données seront disponibles de partout - vous pouvez injecter votre service et en obtenir la valeur. Vous pouvez également simuler/espionner ce service lors des tests unitaires.

Les applications angulaires 2 doivent être construites sous forme d'arborescence composant . Je suppose que la meilleure solution pour votre scénario consiste à le sauvegarder à l'aide d'un service situé sous le composant racine et à le transmettre aux composants enfants en tant qu'entrée. 

De cette façon, vos données seront contrôlées à partir de votre composant principal. Il sera immuable (les composants enfants ne peuvent pas le changer) et vos composants n'auront pas de références externes (c'est une étape importante vers une bonne architecture de composant).

Si vous voulez toujours le faire de la "manière angulaire 1.x", je suppose que vous pouvez injecter ce service partout et utiliser ses valeurs. Ce sont des options moins préférées mais c'est mieux que des variables globales!

J'espère que c'était utile.

5
Yaniv Efraim

Dans votre scénario spécifique, vous souhaiterez réellement stocker le jeton dans le stockage local, car l'actualisation de la page vous fera perdre la valeur du jeton stockée en mémoire.

2
Prabhat

vous pouvez également utiliser ngrx/store , pour les données globales (sauf le jeton jwt) et le transmettre aux composants 'connectés' de manière redux

0