page change angular typescript

change - Angular 2: ¿Cuál es la mejor manera de almacenar variables globales como el token de autenticación para que todas las clases tengan acceso a ellas?



router events angular 6 (4)

Solo pregunta angular 2:

¿Cuál es la mejor manera de almacenar variables globales como el token de autenticación o la url base (configuración del entorno) para que todas las clases puedan acceder a ellas sin perderlas en la actualización?

Así que cuando inicie sesión, le daré al usuario un token de autenticación y normalmente lo almacenaré en el $ rootscope para angular 1.x.


Bueno, para crear datos de alcance realmente global, debe registrar su clase / objeto / valor durante el arranque de la aplicación como parámetro de dependencia a la función de arranque.

bootstrap(MyApp,[MyGlobalService]);

Esto registrará su servicio MyGlobalService (de hecho, puede ser un objeto o una función de fábrica o su propio proveedor) en el nivel raíz. Esta dependencia ahora se puede inyectar en cualquier componente.

A diferencia de Angular1, hay varios inyectores disponibles para una aplicación Angular2, con mapeo uno a uno entre componentes e inyectores. Cada componente tiene su propio inyector.

La guía del desarrollador de Angular tiene un buen ejemplo de tales registros. Consulte la guía de inyección de dependencia .

La otra opción ya ha sido resaltada por @Yaniv.


En mi opinión, almacenar un parámetro como este en una variable global como $ rootScope se considera una mala práctica. En Angular 1.x debe usar un servicio (singelton) para obtener estos datos de todas partes. De esta manera, sus datos estarán disponibles desde cualquier lugar: puede inyectar su servicio y obtener el valor. También puedes simular / espiar este servicio cuando la unidad prueba.

Las aplicaciones de Angular 2 deben construirse como un árbol de componentes . Supongo que la mejor solución para su escenario será guardarlo con un servicio bajo el componente raíz y pasarlo a los componentes secundarios como entrada.

De esta manera sus datos serán controlados desde su componente principal. Será inmutable (los componentes secundarios no pueden cambiarlo) y sus componentes no tendrán referencias externas (es un paso importante hacia una buena arquitectura de componentes).

Si aún desea hacerlo de la manera "Angular 1.x", supongo que podría inyectar este servicio en cualquier lugar y utilizar sus valores. ¡Es menos opciones preferidas pero es mejor que variables globales!

Espero que haya sido útil.


En su escenario específico, realmente desearía almacenar el token en localstorage ya que una actualización de la página hará que pierda el valor del token almacenado en la memoria.


También puede usar ngrx/store , para datos globales (excepto el token jwt) y pasarlo a los componentes ''conectados'' en forma redux