1
00:00:02,110 --> 00:00:07,300
Por lo tanto, para asegurarnos de que cerremos la sesión cuando caduque el token, agregaré una nueva función en nuestra

2
00:00:07,300 --> 00:00:08,150
acción de autenticación,

3
00:00:08,160 --> 00:00:13,270
así que en la carpeta de acciones en la autenticación. js, agregaré una nueva función aquí donde

4
00:00:13,270 --> 00:00:20,950
quiero configurar un temporizador que básicamente expira cuando expira el token. Entonces, podemos llamar a este temporizador de cierre de sesión establecido,

5
00:00:21,220 --> 00:00:21,840
por

6
00:00:21,880 --> 00:00:31,410
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

7
00:00:31,410 --> 00:00:38,630
para establecer un temporizador que caduque después de este tiempo y Digamos que este es un valor en milisegundos, por lo

8
00:00:38,630 --> 00:00:43,280
que es solo una suposición que tengo y, por lo tanto, debemos asegurarnos

9
00:00:43,280 --> 00:00:47,530
de pasar los datos en milisegundos. A partir de entonces, esta

10
00:00:47,540 --> 00:00:55,480
función aquí se ejecutará una vez que el token expire y allí, la pregunta ahora es ¿qué hacemos allí?

11
00:00:56,060 --> 00:00:57,890
Bueno, al final, quiero enviar el cierre

12
00:00:57,900 --> 00:00:58,980
de sesión aquí, ¿verdad?

13
00:00:58,980 --> 00:01:05,490
Por lo tanto, establecer el temporizador de cierre de sesión probablemente no debería ser una función normal, pero en realidad

14
00:01:06,120 --> 00:01:10,370
aquí, tendré una función que aprovecha Redux Thunk, por lo que donde tenemos

15
00:01:10,590 --> 00:01:16,680
esta función en una función donde esta función interna se despacha como argumento y, por lo tanto, una

16
00:01:17,400 --> 00:01:20,010
vez que esto tarea asíncrona finalizada, una vez

17
00:01:20,010 --> 00:01:27,660
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

18
00:01:27,660 --> 00:01:29,510
es esta acción al

19
00:01:29,670 --> 00:01:32,890
final, de modo que eso sucede cuando el temporizador termina.

20
00:01:32,910 --> 00:01:38,670
Ahora, cuando finalicemos la sesión, también quiero borrar los temporizadores en ejecución porque tal vez tengamos

21
00:01:38,670 --> 00:01:45,760
ese temporizador configurado automáticamente aquí, que todavía no estamos configurando, pero pronto lo haremos, luego quiero borrar ese temporizador cuando

22
00:01:45,760 --> 00:01:49,110
finalicemos la sesión manualmente para que No tengo ese temporizador

23
00:01:49,120 --> 00:01:55,670
en curso a pesar de que es redundante. Entonces, podemos agregar una nueva variable tal vez en

24
00:01:55,670 --> 00:02:02,340
la parte superior del archivo aquí, que nombraré temporizador que no se inicializó inicialmente y luego, cuando configuramos un

25
00:02:02,340 --> 00:02:08,760
temporizador, estableceré el resultado del tiempo de espera establecido en temporizador o almacenaré el resultado de ese en

26
00:02:08,850 --> 00:02:12,860
el temporizador, que es un puntero en este temporizador y agrega una

27
00:02:12,860 --> 00:02:21,920
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

28
00:02:21,950 --> 00:02:29,510
envío, sino una función normal donde simplemente llamo al temporizador de tiempo de espera claro y al temporizador es esa variable que

29
00:02:29,510 --> 00:02:30,800
apunta al temporizador.

30
00:02:30,800 --> 00:02:36,080
Solo quiero verificar si el temporizador existe, si no está indefinido y si no está indefinido,

31
00:02:36,080 --> 00:02:41,620
llamaré a esto, clear timeout es una función incorporada integrada en Javascript para deshacerse de ese temporizador.

32
00:02:41,840 --> 00:02:43,290
Entonces, con eso,

33
00:02:43,290 --> 00:02:47,770
podemos borrar el temporizador si ya no lo necesitamos y quiero deshacerme de

34
00:02:47,810 --> 00:02:56,540
é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

35
00:02:56,540 --> 00:03:00,650
hacer cuando Me desconecto, por supuesto, necesito borrar mi almacenamiento asíncrono.

36
00:03:00,650 --> 00:03:09,760
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

37
00:03:09,760 --> 00:03:10,470
datos.

38
00:03:10,540 --> 00:03:12,550
Entonces utilicé los datos del

39
00:03:12,550 --> 00:03:18,010
usuario allí, necesito usar el mismo identificador para borrarlos. Ahora eliminar elemento devuelve una promesa

40
00:03:18,010 --> 00:03:18,680
y

41
00:03:18,730 --> 00:03:25,080
podríamos esperar esto, en ese caso tendríamos que devolver esa sintaxis interna donde obtenemos

42
00:03:25,090 --> 00:03:31,600
el envío y hacemos nuestra tarea asíncrona, así que movemos este código aquí y luego

43
00:03:31,670 --> 00:03:33,380
podemos enviar esto acción.

44
00:03:33,380 --> 00:03:36,500
Podríamos hacer todo eso si estamos interesados en el

45
00:03:36,500 --> 00:03:41,970
resultado de eliminar el elemento, pero aquí no estoy interesado, simplemente dispararé esto y no espero a

46
00:03:42,140 --> 00:03:48,560
que se complete esta promesa, en cambio devuelvo inmediatamente este nuevo objeto de acción y confío en que esto se completará.

47
00:03:48,590 --> 00:03:51,440
Ahora, por supuesto, podría reestructurar esto, pero así es como

48
00:03:51,440 --> 00:03:57,380
lo haré, esto debería eliminar los datos de nuestro almacenamiento local. Con eso, cerrar sesión hace esto, tenemos la función

49
00:03:57,380 --> 00:04:03,450
de temporizador de cierre de sesión que establece un temporizador que cierra la sesión una vez que caduca, ahora solo tenemos

50
00:04:03,450 --> 00:04:07,920
que asegurarnos de que enviamos este creador de acciones de temporizador de cierre de sesión aquí,

51
00:04:07,920 --> 00:04:15,510
que usamos este creador de acciones y Quiero usar esto cuando nos autentiquemos. Entonces, tenemos esta acción de

52
00:04:15,510 --> 00:04:22,630
autenticación aquí y allá al final, necesito despachar el temporizador de

53
00:04:22,800 --> 00:04:30,770
cierre de sesión así como esto aquí. Entonces, ahora usaré esta sintaxis diferente donde obtuvimos

54
00:04:30,770 --> 00:04:37,280
esta función interna que recibe el despacho, de modo que aquí puedo despachar el temporizador de

55
00:04:37,760 --> 00:04:42,940
cierre de sesión para que se active aquí y, por supuesto, esto también

56
00:04:45,740 --> 00:04:51,590
significa que aquí, en lugar de devolver esto, También necesitamos enviar esto, por lo

57
00:04:51,590 --> 00:04:59,970
que enviamos dos acciones aquí, lo cual está absolutamente bien. Así que configuré mi temporizador y luego despacho la

58
00:05:00,390 --> 00:05:02,270
acción de autenticación.

59
00:05:02,290 --> 00:05:08,890
Ahora, por supuesto, el temporizador de cierre de sesión necesita saber cuánto tiempo debe tomar, se requiere el

60
00:05:08,890 --> 00:05:17,110
tiempo de vencimiento y espero obtener esto, este tiempo de vencimiento solo para mezclar nombres, como un argumento aquí para autenticar y poder

61
00:05:17,110 --> 00:05:20,920
reenviar esto aquí a mi temporizador de cierre de sesión.

62
00:05:20,920 --> 00:05:27,400
Eso significa que cada lugar donde despachamos la acción de autenticación o donde usamos este creador de acción, debo decir,

63
00:05:27,400 --> 00:05:33,100
cada lugar donde hacemos esto no solo necesita proporcionar el ID de usuario y el token sino también

64
00:05:33,280 --> 00:05:35,230
el tiempo de vencimiento y eso

65
00:05:35,470 --> 00:05:38,580
comienza aquí con Regístrate. Cuando nos registramos,

66
00:05:38,590 --> 00:05:46,800
tenemos nuestra fecha de vencimiento aquí y enviamos la autenticación. Ahora autenticar también necesita el tiempo de

67
00:05:46,800 --> 00:05:47,670
caducidad.

68
00:05:47,670 --> 00:05:52,440
Ahora, lo bueno es que aquí es muy fácil saber cuándo caduca porque lo

69
00:05:52,440 --> 00:05:58,730
tenemos en los datos de respuesta, allí lo caduca en el campo que, por supuesto, es una cadena, por

70
00:05:58,830 --> 00:06:07,970
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

71
00:06:07,970 --> 00:06:11,480
de sesión en milisegundos, por lo que multiplicaré esto

72
00:06:11,690 --> 00:06:19,540
con 1000 y, por supuesto, también lo agregaré al iniciar sesión. Allí, también agregaré eso como un tercer

73
00:06:19,580 --> 00:06:23,890
argumento aquí para que para iniciar sesión cuando

74
00:06:24,110 --> 00:06:31,490
despachemos esta acción de autenticación, también enviemos nuestro tiempo de vencimiento que estamos

75
00:06:31,490 --> 00:06:36,520
recuperando de Firebase. Ahora también tenemos otro lugar donde necesitamos hacer

76
00:06:36,530 --> 00:06:38,660
eso y esa es la pantalla

77
00:06:38,660 --> 00:06:45,740
de inicio porque allí también enviamos autenticación y aquí tenemos que calcular el tiempo restante porque esto se activa cada vez

78
00:06:45,950 --> 00:06:47,410
que reiniciamos la

79
00:06:47,420 --> 00:06:51,080
aplicación, así que aquí no sabemos cuánto tiempo tardará en expirar

80
00:06:51,080 --> 00:06:53,100
el token y debemos calcular esto.

81
00:06:53,150 --> 00:07:02,060
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,

82
00:07:02,060 --> 00:07:08,090
lo que me da su marca de tiempo en milisegundos desde el comienzo del tiempo y a partir

83
00:07:08,090 --> 00:07:09,070
de eso

84
00:07:09,800 --> 00:07:14,940
tengo que deducir el tiempo de obtención de la marca de tiempo actual, entonces la

85
00:07:15,020 --> 00:07:18,820
marca de tiempo actual en milisegundos. Esto será en el futuro, ahora

86
00:07:18,830 --> 00:07:19,850
es así,

87
00:07:19,850 --> 00:07:24,810
la diferencia debería ser un número positivo porque estoy comprobando que esto es en el futuro

88
00:07:24,830 --> 00:07:28,280
aquí, por lo que debería ser un número positivo en milisegundos.

89
00:07:28,310 --> 00:07:35,060
Así que ahora el tiempo de vencimiento aquí se puede reenviar para autenticar y con eso, también deberíamos tener el cierre de

90
00:07:35,330 --> 00:07:36,110
sesión automático.

91
00:07:37,790 --> 00:07:39,450
Ahora para validar

92
00:07:39,470 --> 00:07:46,440
que esto funciona, vamos a la autenticación. js y, de hecho, allí, en la función de temporizador de cierre

93
00:07:46,560 --> 00:07:53,350
de sesión, dividiré temporalmente el tiempo de caducidad por 1000, lo que significa que dividiré los milisegundos por 1000, lo que los convertirá

94
00:07:53,370 --> 00:07:54,960
en segundos y eso

95
00:07:54,960 --> 00:07:57,320
significa que deberíamos cerrar la sesión ahora instantáneamente.

96
00:07:59,410 --> 00:08:06,940
Si recargo, estoy desconectado, pero pronto notarás que solo funciona teóricamente. Si vuelvo a iniciar sesión, estoy conectado

97
00:08:06,940 --> 00:08:12,830
y ahora desde que dividí el valor entre 1000, debería cerrar

98
00:08:12,830 --> 00:08:21,370
sesión después de 3. 6 segundos pero no lo soy. Puedo navegar pero si

99
00:08:22,390 --> 00:08:30,720
vuelvo a cargar, de hecho, ahora estoy desconectado. Por lo tanto, limpió los datos, pero no nos volvió a navegar a la pantalla de

100
00:08:30,720 --> 00:08:31,530
autenticación y

101
00:08:31,920 --> 00:08:37,710
la razón es que nunca le indicamos a React Native que nos vuelva a navegar a la pantalla de autenticación, así que

102
00:08:37,740 --> 00:08:39,250
esa es la pieza que falta.

103
00:08:39,270 --> 00:08:45,300
Limpiar nuestra tienda Redux es bueno, pero como reacción a esa autorización, debemos asegurarnos de

104
00:08:45,300 --> 00:08:52,090
que volvamos a la pantalla de autenticación. Para asegurarnos de que esto suceda, necesitamos un lugar que siempre se procese

105
00:08:52,090 --> 00:08:59,230
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,

106
00:08:59,230 --> 00:09:06,480
podamos navegar de regreso a pantalla de autenticación Ahora esa sería la aplicación. js porque eso envuelve todo,

107
00:09:06,490 --> 00:09:08,100
pero el

108
00:09:08,110 --> 00:09:14,080
problema está ahí, configuré Redux aquí. Entonces, Redux en mi tienda solo está disponible dentro

109
00:09:14,080 --> 00:09:19,960
de aquí, así que en componentes secundarios anidados y ese ya es mi componente de navegador al que no

110
00:09:19,960 --> 00:09:21,000
tengo acceso directo.

111
00:09:21,100 --> 00:09:28,700
La solución es simplemente envolver esto con otro componente. Lo crearé en la carpeta de

112
00:09:29,090 --> 00:09:33,120
navegación porque lo llamaré contenedor de navegación.

113
00:09:33,140 --> 00:09:37,690
Ahora, este es un componente React normal, como este, donde

114
00:09:38,820 --> 00:09:46,650
no necesito nada de React Native pero donde configuro mi componente contenedor de navegación donde recibo accesorios y

115
00:09:46,650 --> 00:09:52,980
devuelvo algunos jsx al final y exporto esto como un contenedor de navegación predeterminado.

116
00:09:54,380 --> 00:10:02,810
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

117
00:10:02,810 --> 00:10:06,230
misma carpeta y eso será lo que regrese aquí, mi

118
00:10:06,410 --> 00:10:15,110
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

119
00:10:15,110 --> 00:10:24,190
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

120
00:10:24,230 --> 00:10:29,980
y uso el contenedor de navegación aquí en lugar del navegador de la tienda.

121
00:10:29,990 --> 00:10:34,670
Ahora, esto es simplemente una envoltura alrededor del navegador de la tienda, pero como está dentro del proveedor,

122
00:10:34,670 --> 00:10:36,410
ahora tengo acceso a Redux allí.

123
00:10:36,440 --> 00:10:46,150
Entonces, aquí, podemos importar el selector de uso de React Redux y usarlo aquí para aprovechar Redux.

124
00:10:46,190 --> 00:10:54,320
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

125
00:10:55,010 --> 00:11:00,410
y luego puedo acceder al estado. auth. token para obtener acceso al

126
00:11:00,410 --> 00:11:06,980
token en mi segmento de estado de autenticación y usar el operador de doble explosión para forzar básicamente que esto sea

127
00:11:06,980 --> 00:11:12,620
verdadero o falso y si no tenemos token, esto será falso, por lo que esAuth será falso en

128
00:11:12,620 --> 00:11:15,460
ese caso, si tenemos un token será cierto, así

129
00:11:15,500 --> 00:11:23,780
que es verdad es verdad si tenemos un token que tiene sentido, supongo. Ahora podemos usar el efecto aquí para reaccionar a los

130
00:11:23,780 --> 00:11:25,060
cambios en eso.

131
00:11:25,160 --> 00:11:29,480
Entonces, aquí en efecto, mi matriz de dependencia incluye isAuth, por lo que

132
00:11:29,480 --> 00:11:37,270
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

133
00:11:37,270 --> 00:11:39,630
lo que me importa, si isAuth

134
00:11:39,670 --> 00:11:45,910
no es cierto , si es cierto, no me importa, pero si no es cierto, quiero navegar a

135
00:11:45,910 --> 00:11:49,220
la pantalla de autenticación y ahora tenemos otro problema.

136
00:11:49,390 --> 00:11:55,930
El navegador está aquí y solo en los componentes que se representan con la ayuda del navegador

137
00:11:55,930 --> 00:12:03,220
tenemos acceso a accesorios. navegación. navegar, pero afortunadamente, React navigation nos da una escotilla de escape. Podemos usar una

138
00:12:03,220 --> 00:12:08,770
referencia para obtener acceso a la funcionalidad de navegación con la ayuda

139
00:12:08,770 --> 00:12:17,550
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

140
00:12:17,610 --> 00:12:20,610
y simplemente creamos nuestra referencia de navegación aquí llamando a

141
00:12:21,270 --> 00:12:27,070
use ref de esta manera y debe tener en cuenta las referencias en React, que es básicamente una forma

142
00:12:27,070 --> 00:12:34,890
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

143
00:12:34,910 --> 00:12:37,450
la referencia de navegación o al revés.

144
00:12:37,470 --> 00:12:43,020
Entonces esto establece una conexión entre la constante de referencia de navegación y este elemento que al final se representa aquí

145
00:12:43,020 --> 00:12:49,610
y ahora con esto aquí en efecto, podemos llamar a navRef. actual, así es como funcionan

146
00:12:49,630 --> 00:12:50,830
los

147
00:12:50,830 --> 00:12:59,660
á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

148
00:12:59,660 --> 00:13:05,420
final es porque el contenedor de la tienda no es más que ShopNavigator. js exporta que es un componente de contenedor

149
00:13:05,420 --> 00:13:11,010
de aplicaciones y este componente tiene un método de envío que podemos usar para enviar

150
00:13:11,010 --> 00:13:15,110
una acción de navegación. Para eso, ahora

151
00:13:15,110 --> 00:13:24,650
necesitamos importar algo de React navigation y ese algo es el objeto de acciones de navegación aquí

152
00:13:24,650 --> 00:13:29,720
y luego aquí, llamamos NavigationActions. navegar y ahora

153
00:13:29,900 --> 00:13:36,620
esto nos permite navegar. Sin embargo, no con una autenticación como esta, pero esto

154
00:13:36,620 --> 00:13:41,950
requiere un objeto como argumento donde configura el nombre de la ruta y ahora puede ser autenticación.

155
00:13:41,960 --> 00:13:47,270
Así es como ahora podemos navegar desde el interior de este componente a pesar de que está fuera del navegador.

156
00:13:49,080 --> 00:13:56,610
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

157
00:13:56,610 --> 00:14:03,320
de la tienda, en nuestro botón de cierre de sesión, no necesitamos navegar aquí porque si activamos el cierre de sesión,

158
00:14:03,340 --> 00:14:08,670
si enviamos esta acción , borramos el token en Redux y, por lo tanto, esto debería activar

159
00:14:08,670 --> 00:14:12,390
automáticamente nuestra navegación gracias a este contenedor de navegación y, por

160
00:14:12,660 --> 00:14:18,140
lo tanto, ahora si lo guardamos, deberíamos navegar hacia la autenticación cuando el token no sea válido.

161
00:14:18,140 --> 00:14:25,530
Entonces, si vuelvo a iniciar sesión, después de 3. 6 segundos, deberíamos cerrar sesión y deberíamos ver que

162
00:14:25,530 --> 00:14:26,800
estamos desconectados,

163
00:14:26,850 --> 00:14:28,690
sí, eso se ve bien.

164
00:14:28,890 --> 00:14:30,780
Vamos a intentarlo de nuevo

165
00:14:36,990 --> 00:14:37,520
aquí,

166
00:14:37,820 --> 00:14:45,490
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

167
00:14:45,530 --> 00:14:47,340
cerrar sesión, esto también funciona.

168
00:14:47,410 --> 00:14:50,900
Entonces, con eso, incorporamos la funcionalidad de cierre de

169
00:14:50,950 --> 00:14:57,580
sesión automático, ahora volvamos al archivo de acción de autenticación y eliminemos esta división ficticia aquí porque solo hice

170
00:14:57,580 --> 00:15:02,020
esto para las pruebas, por supuesto, no quiero acortar manualmente mi tiempo

171
00:15:02,020 --> 00:15:08,980
de vencimiento , en cambio, ahora aquí tenemos una funcionalidad que funciona y que asegura que no importa si nos

172
00:15:09,160 --> 00:15:16,210
estamos registrando o si estamos iniciando sesión o lo que sea que estamos haciendo, tenemos un token que almacenamos, que

173
00:15:16,210 --> 00:15:21,660
podemos usar y nos aseguramos de que también cerremos sesión automáticamente si nuestro token caduca.

174
00:15:21,700 --> 00:15:24,010
Esta es la aplicación terminada aquí.