Por lo tanto, para asegurarnos de que cerremos la sesión cuando caduque el token, agregaré una nueva función en nuestra
acción de autenticación,
así que en la carpeta de acciones en la autenticación. js, agregaré una nueva función aquí donde
quiero configurar un temporizador que básicamente expira cuando expira el token. Entonces, podemos llamar a este temporizador de cierre de sesión establecido,
por
ejemplo, y allí, espero obtener el tiempo de vencimiento y aquí, podemos usar el buen tiempo de espera establecido que React Native admite en su versión de Javascript
para establecer un temporizador que caduque después de este tiempo y Digamos que este es un valor en milisegundos, por lo
que es solo una suposición que tengo y, por lo tanto, debemos asegurarnos
de pasar los datos en milisegundos. A partir de entonces, esta
función aquí se ejecutará una vez que el token expire y allí, la pregunta ahora es ¿qué hacemos allí?
Bueno, al final, quiero enviar el cierre
de sesión aquí, ¿verdad?
Por lo tanto, establecer el temporizador de cierre de sesión probablemente no debería ser una función normal, pero en realidad
aquí, tendré una función que aprovecha Redux Thunk, por lo que donde tenemos
esta función en una función donde esta función interna se despacha como argumento y, por lo tanto, una
vez que esto tarea asíncrona finalizada, una vez
que este temporizador expiró, podemos despachar el cierre de sesión, por lo que podemos enviar el resultado de este creador de acción, que
es esta acción al
final, de modo que eso sucede cuando el temporizador termina.
Ahora, cuando finalicemos la sesión, también quiero borrar los temporizadores en ejecución porque tal vez tengamos
ese temporizador configurado automáticamente aquí, que todavía no estamos configurando, pero pronto lo haremos, luego quiero borrar ese temporizador cuando
finalicemos la sesión manualmente para que No tengo ese temporizador
en curso a pesar de que es redundante. Entonces, podemos agregar una nueva variable tal vez en
la parte superior del archivo aquí, que nombraré temporizador que no se inicializó inicialmente y luego, cuando configuramos un
temporizador, estableceré el resultado del tiempo de espera establecido en temporizador o almacenaré el resultado de ese en
el temporizador, que es un puntero en este temporizador y agrega una
nueva función, tal vez aquí, borrar el temporizador de cierre de sesión que ahora es una función normal, no una función que obtiene esta función interna de
envío, sino una función normal donde simplemente llamo al temporizador de tiempo de espera claro y al temporizador es esa variable que
apunta al temporizador.
Solo quiero verificar si el temporizador existe, si no está indefinido y si no está indefinido,
llamaré a esto, clear timeout es una función incorporada integrada en Javascript para deshacerse de ese temporizador.
Entonces, con eso,
podemos borrar el temporizador si ya no lo necesitamos y quiero deshacerme de
él cada vez que cerremos la sesión, así que cuando esto suceda aquí, llamaré al temporizador de cierre de sesión y otra cosa que debo
hacer cuando Me desconecto, por supuesto, necesito borrar mi almacenamiento asíncrono.
Entonces, aquí, puedo llamar al almacenamiento asíncrono para eliminar los datos del usuario del elemento, nuevamente usando el mismo identificador que usé para almacenar los
datos.
Entonces utilicé los datos del
usuario allí, necesito usar el mismo identificador para borrarlos. Ahora eliminar elemento devuelve una promesa
y
podríamos esperar esto, en ese caso tendríamos que devolver esa sintaxis interna donde obtenemos
el envío y hacemos nuestra tarea asíncrona, así que movemos este código aquí y luego
podemos enviar esto acción.
Podríamos hacer todo eso si estamos interesados en el
resultado de eliminar el elemento, pero aquí no estoy interesado, simplemente dispararé esto y no espero a
que se complete esta promesa, en cambio devuelvo inmediatamente este nuevo objeto de acción y confío en que esto se completará.
Ahora, por supuesto, podría reestructurar esto, pero así es como
lo haré, esto debería eliminar los datos de nuestro almacenamiento local. Con eso, cerrar sesión hace esto, tenemos la función
de temporizador de cierre de sesión que establece un temporizador que cierra la sesión una vez que caduca, ahora solo tenemos
que asegurarnos de que enviamos este creador de acciones de temporizador de cierre de sesión aquí,
que usamos este creador de acciones y Quiero usar esto cuando nos autentiquemos. Entonces, tenemos esta acción de
autenticación aquí y allá al final, necesito despachar el temporizador de
cierre de sesión así como esto aquí. Entonces, ahora usaré esta sintaxis diferente donde obtuvimos
esta función interna que recibe el despacho, de modo que aquí puedo despachar el temporizador de
cierre de sesión para que se active aquí y, por supuesto, esto también
significa que aquí, en lugar de devolver esto, También necesitamos enviar esto, por lo
que enviamos dos acciones aquí, lo cual está absolutamente bien. Así que configuré mi temporizador y luego despacho la
acción de autenticación.
Ahora, por supuesto, el temporizador de cierre de sesión necesita saber cuánto tiempo debe tomar, se requiere el
tiempo de vencimiento y espero obtener esto, este tiempo de vencimiento solo para mezclar nombres, como un argumento aquí para autenticar y poder
reenviar esto aquí a mi temporizador de cierre de sesión.
Eso significa que cada lugar donde despachamos la acción de autenticación o donde usamos este creador de acción, debo decir,
cada lugar donde hacemos esto no solo necesita proporcionar el ID de usuario y el token sino también
el tiempo de vencimiento y eso
comienza aquí con Regístrate. Cuando nos registramos,
tenemos nuestra fecha de vencimiento aquí y enviamos la autenticación. Ahora autenticar también necesita el tiempo de
caducidad.
Ahora, lo bueno es que aquí es muy fácil saber cuándo caduca porque lo
tenemos en los datos de respuesta, allí lo caduca en el campo que, por supuesto, es una cadena, por
lo que con parseInt, podemos convertir esto en un número y luego esto será en segundos, autentique y configure los valores de espera del temporizador de cierre
de sesión en milisegundos, por lo que multiplicaré esto
con 1000 y, por supuesto, también lo agregaré al iniciar sesión. Allí, también agregaré eso como un tercer
argumento aquí para que para iniciar sesión cuando
despachemos esta acción de autenticación, también enviemos nuestro tiempo de vencimiento que estamos
recuperando de Firebase. Ahora también tenemos otro lugar donde necesitamos hacer
eso y esa es la pantalla
de inicio porque allí también enviamos autenticación y aquí tenemos que calcular el tiempo restante porque esto se activa cada vez
que reiniciamos la
aplicación, así que aquí no sabemos cuánto tiempo tardará en expirar
el token y debemos calcular esto.
Entonces, aquí puedo calcular el tiempo de vencimiento básicamente tomando la fecha de vencimiento, que es un objeto de fecha, y llamando a obtener tiempo en él,
lo que me da su marca de tiempo en milisegundos desde el comienzo del tiempo y a partir
de eso
tengo que deducir el tiempo de obtención de la marca de tiempo actual, entonces la
marca de tiempo actual en milisegundos. Esto será en el futuro, ahora
es así,
la diferencia debería ser un número positivo porque estoy comprobando que esto es en el futuro
aquí, por lo que debería ser un número positivo en milisegundos.
Así que ahora el tiempo de vencimiento aquí se puede reenviar para autenticar y con eso, también deberíamos tener el cierre de
sesión automático.
Ahora para validar
que esto funciona, vamos a la autenticación. js y, de hecho, allí, en la función de temporizador de cierre
de sesión, dividiré temporalmente el tiempo de caducidad por 1000, lo que significa que dividiré los milisegundos por 1000, lo que los convertirá
en segundos y eso
significa que deberíamos cerrar la sesión ahora instantáneamente.
Si recargo, estoy desconectado, pero pronto notarás que solo funciona teóricamente. Si vuelvo a iniciar sesión, estoy conectado
y ahora desde que dividí el valor entre 1000, debería cerrar
sesión después de 3. 6 segundos pero no lo soy. Puedo navegar pero si
vuelvo a cargar, de hecho, ahora estoy desconectado. Por lo tanto, limpió los datos, pero no nos volvió a navegar a la pantalla de
autenticación y
la razón es que nunca le indicamos a React Native que nos vuelva a navegar a la pantalla de autenticación, así que
esa es la pieza que falta.
Limpiar nuestra tienda Redux es bueno, pero como reacción a esa autorización, debemos asegurarnos de
que volvamos a la pantalla de autenticación. Para asegurarnos de que esto suceda, necesitamos un lugar que siempre se procese
y que envuelva toda nuestra aplicación donde podamos escuchar nuestra tienda Redux y saber cuándo nuestro token se restablece a nulo para que, si eso sucede,
podamos navegar de regreso a pantalla de autenticación Ahora esa sería la aplicación. js porque eso envuelve todo,
pero el
problema está ahí, configuré Redux aquí. Entonces, Redux en mi tienda solo está disponible dentro
de aquí, así que en componentes secundarios anidados y ese ya es mi componente de navegador al que no
tengo acceso directo.
La solución es simplemente envolver esto con otro componente. Lo crearé en la carpeta de
navegación porque lo llamaré contenedor de navegación.
Ahora, este es un componente React normal, como este, donde
no necesito nada de React Native pero donde configuro mi componente contenedor de navegación donde recibo accesorios y
devuelvo algunos jsx al final y exporto esto como un contenedor de navegación predeterminado.
Ahora allí quiero configurar mi navegación, así que importaré el navegador de la tienda desde el navegador de la tienda que está en la
misma carpeta y eso será lo que regrese aquí, mi
navegador de la tienda de esta manera. Ahora puedo usar mi contenedor de navegación aquí en la aplicación. js, así que en lugar de importar
el navegador de la tienda aquí, importo mi contenedor de navegación de la carpeta de navegación y del archivo del contenedor de navegación
y uso el contenedor de navegación aquí en lugar del navegador de la tienda.
Ahora, esto es simplemente una envoltura alrededor del navegador de la tienda, pero como está dentro del proveedor,
ahora tengo acceso a Redux allí.
Entonces, aquí, podemos importar el selector de uso de React Redux y usarlo aquí para aprovechar Redux.
Entonces, aquí en el contenedor de navegación, simplemente puedo obtener acceso a isAuth, digamos usando el selector de uso que toma esta función que me da acceso al estado de Redux
y luego puedo acceder al estado. auth. token para obtener acceso al
token en mi segmento de estado de autenticación y usar el operador de doble explosión para forzar básicamente que esto sea
verdadero o falso y si no tenemos token, esto será falso, por lo que esAuth será falso en
ese caso, si tenemos un token será cierto, así
que es verdad es verdad si tenemos un token que tiene sentido, supongo. Ahora podemos usar el efecto aquí para reaccionar a los
cambios en eso.
Entonces, aquí en efecto, mi matriz de dependencia incluye isAuth, por lo que
cuando isAuth cambia, esta función de efecto debería ejecutarse y, por lo tanto, aquí puedo verificar si no estamos autenticados porque eso es
lo que me importa, si isAuth
no es cierto , si es cierto, no me importa, pero si no es cierto, quiero navegar a
la pantalla de autenticación y ahora tenemos otro problema.
El navegador está aquí y solo en los componentes que se representan con la ayuda del navegador
tenemos acceso a accesorios. navegación. navegar, pero afortunadamente, React navigation nos da una escotilla de escape. Podemos usar una
referencia para obtener acceso a la funcionalidad de navegación con la ayuda
de este componente cuando la usamos en nuestro código jsx. Podemos crear dicha referencia con use ref con el gancho de referencia de uso
y simplemente creamos nuestra referencia de navegación aquí llamando a
use ref de esta manera y debe tener en cuenta las referencias en React, que es básicamente una forma
de acceder directamente a un elemento renderizar en jsx y ahora podemos agregar la propiedad de referencia al navegador de la tienda y asignar esto a
la referencia de navegación o al revés.
Entonces esto establece una conexión entre la constante de referencia de navegación y este elemento que al final se representa aquí
y ahora con esto aquí en efecto, podemos llamar a navRef. actual, así es como funcionan
los
árbitros, tienen un despacho de propiedad actual. El envío es un método disponible por el navegador de la tienda o por este contenedor de aplicaciones, que al
final es porque el contenedor de la tienda no es más que ShopNavigator. js exporta que es un componente de contenedor
de aplicaciones y este componente tiene un método de envío que podemos usar para enviar
una acción de navegación. Para eso, ahora
necesitamos importar algo de React navigation y ese algo es el objeto de acciones de navegación aquí
y luego aquí, llamamos NavigationActions. navegar y ahora
esto nos permite navegar. Sin embargo, no con una autenticación como esta, pero esto
requiere un objeto como argumento donde configura el nombre de la ruta y ahora puede ser autenticación.
Así es como ahora podemos navegar desde el interior de este componente a pesar de que está fuera del navegador.
Así que esto va a la autenticación cada vez que nuestro estado isAuth cambia a no autenticado, esto también significa que en el navegador
de la tienda, en nuestro botón de cierre de sesión, no necesitamos navegar aquí porque si activamos el cierre de sesión,
si enviamos esta acción , borramos el token en Redux y, por lo tanto, esto debería activar
automáticamente nuestra navegación gracias a este contenedor de navegación y, por
lo tanto, ahora si lo guardamos, deberíamos navegar hacia la autenticación cuando el token no sea válido.
Entonces, si vuelvo a iniciar sesión, después de 3. 6 segundos, deberíamos cerrar sesión y deberíamos ver que
estamos desconectados,
sí, eso se ve bien.
Vamos a intentarlo de nuevo
aquí,
sí, volviendo atrás y también intentemos cerrar la sesión manualmente. Entonces, si voy a iniciar sesión, abro esto, hago clic en
cerrar sesión, esto también funciona.
Entonces, con eso, incorporamos la funcionalidad de cierre de
sesión automático, ahora volvamos al archivo de acción de autenticación y eliminemos esta división ficticia aquí porque solo hice
esto para las pruebas, por supuesto, no quiero acortar manualmente mi tiempo
de vencimiento , en cambio, ahora aquí tenemos una funcionalidad que funciona y que asegura que no importa si nos
estamos registrando o si estamos iniciando sesión o lo que sea que estamos haciendo, tenemos un token que almacenamos, que
podemos usar y nos aseguramos de que también cerremos sesión automáticamente si nuestro token caduca.
Esta es la aplicación terminada aquí.