1
00:00:02,140 --> 00:00:08,590
Entonces, ¿cómo podemos salir de esta pantalla de autenticación ahora si hemos iniciado sesión o si nos registramos correctamente?

2
00:00:09,520 --> 00:00:11,130
Bueno, eso no es demasiado difícil.

3
00:00:11,380 --> 00:00:16,690
Si superamos este envío aquí sin aterrizar en el bloque catch, por lo que todavía

4
00:00:16,720 --> 00:00:18,730
está aquí en el

5
00:00:19,090 --> 00:00:26,560
bloque try, podemos llamar a los accesorios. navegación. navegue como siempre lo hicimos y

6
00:00:26,560 --> 00:00:29,470
navegue a las diferentes pantallas que configuramos en nuestro

7
00:00:29,470 --> 00:00:37,500
navegador de cambios, en este caso a la pantalla de la tienda. Así que hagamos eso, simplemente vayamos de compras y allí por

8
00:00:37,500 --> 00:00:42,950
ahora tan pronto como iniciemos sesión con éxito, lo que haré ahora, esto se carga

9
00:00:43,030 --> 00:00:45,300
y estamos aquí. Ahora recibiré una advertencia

10
00:00:45,330 --> 00:00:49,300
aquí con respecto a alguna actualización de estado que no se pudo realizar, ese conjunto

11
00:00:49,300 --> 00:00:55,450
es el estado de carga que ahora falla si navegamos fuera. La solución es simplemente que no deberíamos intentar actualizar el estado en esta

12
00:00:55,450 --> 00:01:01,000
pantalla si ya no estamos en la pantalla, por lo que simplemente podemos moverlo al bloque catch porque solo necesitaremos restablecer la carga

13
00:01:01,000 --> 00:01:05,560
si tenemos un error porque ese es el único caso cuando permanecemos en la pantalla de autenticación, de lo

14
00:01:05,560 --> 00:01:07,600
contrario no necesitamos cambiar el estado de

15
00:01:07,600 --> 00:01:12,190
carga porque de todos modos estamos dejando la pantalla. Entonces con eso, también nos

16
00:01:12,190 --> 00:01:13,780
libraremos de esto, si

17
00:01:13,780 --> 00:01:17,080
ahora lo intento de nuevo, aquí vamos y

18
00:01:17,300 --> 00:01:18,170
ahora

19
00:01:18,170 --> 00:01:22,730
estamos en nuestra tienda principal. Ahora, por supuesto, todavía no estamos utilizando

20
00:01:22,730 --> 00:01:24,620
el token, así que asegurémonos

21
00:01:24,740 --> 00:01:31,550
de hacerlo también y para eso vamos al reductor de autenticación y agreguemos un estado inicial allí que describe básicamente con qué

22
00:01:31,640 --> 00:01:35,850
estado queremos comenzar y cuál es nuestro general La forma del estado es

23
00:01:36,230 --> 00:01:41,960
y allí quiero almacenar el token que inicialmente es nulo y quiero almacenar el ID de usuario que

24
00:01:41,960 --> 00:01:45,980
inicialmente es nulo, por lo que el estado inicial es muy básico.

25
00:01:45,980 --> 00:01:51,230
Entonces podemos exportar la función reductora que toma ese estado inicial y que también recibe, por supuesto,

26
00:01:52,010 --> 00:01:57,430
una acción y aquí quiero cambiar el tipo de acción como siempre y obtuve dos casos en

27
00:01:57,430 --> 00:01:59,960
los que estoy interesado en este momento.

28
00:01:59,980 --> 00:02:08,190
Una es la acción de inicio de sesión, por lo que debe importar este identificador desde la carpeta de acciones y el

29
00:02:08,190 --> 00:02:12,530
archivo de autenticación allí y el otro caso es la acción

30
00:02:12,580 --> 00:02:14,680
de registro, por lo que

31
00:02:15,820 --> 00:02:25,400
también debe importar este identificador, en otros casos, solo quiero Regresa mi estado. Entonces, si iniciamos sesión, quiero devolver un nuevo estado donde debería

32
00:02:25,400 --> 00:02:33,400
estar el token, digamos acción. token y userId deberían ser acciones. userId y esa es la misma

33
00:02:33,940 --> 00:02:38,530
actualización que necesito para registrarme para que podamos copiar eso allí.

34
00:02:39,220 --> 00:02:44,530
Ahora, por supuesto, debemos asegurarnos de que nuestra acción contenga token y userId, por lo que

35
00:02:44,530 --> 00:02:51,970
en el creador de la acción al final del registro aquí cuando despacho la acción de registro, necesitamos agregar un campo de

36
00:02:51,970 --> 00:02:55,300
token y necesitamos agregar un ID de usuario campo.

37
00:02:55,470 --> 00:03:03,670
Ahora el token se puede obtener de los datos de respuesta, ahí está ese token de identificación y lo mismo aquí, resData no es un token de

38
00:03:03,670 --> 00:03:09,250
identificación pero es localId y ves que aquí en el registro, localId, aquí está el userId y si

39
00:03:09,280 --> 00:03:16,530
te desplazas hacia arriba , ID token, ese es el token. Eso es lo que envío aquí y podemos

40
00:03:17,070 --> 00:03:21,140
copiarlo y usar lo mismo, casi lo mismo para iniciar sesión,

41
00:03:21,150 --> 00:03:28,140
lo único que debe cambiar es este identificador e incluso puede unir el inicio de sesión y registrarse en

42
00:03:28,140 --> 00:03:34,800
un identificador de autenticación combinado, digamos porque en un reductor, estamos haciendo lo mismo de todos modos.

43
00:03:34,920 --> 00:03:40,200
Así que solo lo he dividido aquí para dejar en claro que tenemos dos cosas diferentes al final, pero la

44
00:03:40,200 --> 00:03:44,420
actualización es la misma, por lo que definitivamente podríamos combinar estos dos tipos de acción.

45
00:03:45,250 --> 00:03:48,970
Entonces, con eso, ahora estamos almacenando el token y eso es bueno,

46
00:03:49,330 --> 00:03:51,990
pero ¿para qué necesitamos este token nuevamente?

47
00:03:52,150 --> 00:03:59,700
Necesitamos ese token que ahora estamos almacenando para acceder a nuestra API y para eso, vamos a Firebase y a la

48
00:03:59,700 --> 00:04:00,870
base de datos.

49
00:04:00,870 --> 00:04:05,940
Tenga en cuenta que cuando configuramos esta base de datos, mencioné que debe comenzar en

50
00:04:05,940 --> 00:04:11,370
este modo de prueba si lo recuerda. Lo que esto hizo es que estableció ciertas reglas y puede verificarlas

51
00:04:11,370 --> 00:04:15,810
si hace clic en la pestaña de reglas. Esto controla quién puede leer y escribir en su

52
00:04:15,810 --> 00:04:20,730
base de datos y en este momento esto está configurado como verdadero, lo que significa que todos pueden leer todo y

53
00:04:20,820 --> 00:04:21,930
todos pueden escribir todo.

54
00:04:22,230 --> 00:04:32,630
Por supuesto, eso normalmente no es lo que desea, en su lugar, aquí configuraré ambos para que la autenticación sea desigual a nulo, lo que puede parecer extraño y, por cierto, esto

55
00:04:32,630 --> 00:04:39,200
debería ser comillas dobles, pero esta es la sintaxis de Firebase y puede obtener más información sobre las reglas aquí

56
00:04:39,200 --> 00:04:44,480
al haciendo clic en obtener más información o simplemente google for Firebase reglas de seguridad

57
00:04:44,480 --> 00:04:46,960
de bases de datos en tiempo real.

58
00:04:47,000 --> 00:04:53,000
Lo que esto le dice a Firebase es que solo los usuarios autenticados, por lo que solo los usuarios

59
00:04:53,000 --> 00:04:57,400
que envían la solicitud con un token válido deberían poder leer y escribir.

60
00:04:57,560 --> 00:05:00,080
Ahora incluso podría argumentar que Redux siempre debería estar

61
00:05:00,110 --> 00:05:06,710
permitido, podríamos establecer esto en realidad e incluso podría ser más específico con respecto a las reglas para que diga que Redux de los

62
00:05:06,710 --> 00:05:07,970
productos está permitido, Redux

63
00:05:07,970 --> 00:05:09,770
de los pedidos no lo es,

64
00:05:09,800 --> 00:05:13,200
pero nuevamente eso es algo que puede verificar con los documentos oficiales.

65
00:05:13,370 --> 00:05:18,950
Iré con la configuración donde Redux siempre está permitido pero la escritura no.

66
00:05:19,010 --> 00:05:22,160
Entonces, para escribir, necesitamos un token,

67
00:05:22,160 --> 00:05:28,640
de lo contrario nos enfrentaremos a un problema. Si iniciamos sesión aquí y estamos almacenando el token pero no

68
00:05:28,640 --> 00:05:30,440
lo estamos agregando a las

69
00:05:30,650 --> 00:05:33,060
solicitudes en este momento, verá que podemos

70
00:05:33,320 --> 00:05:38,510
cargar todos los datos, está bien, pero también notará que si intento editar esto y eliminar un

71
00:05:38,510 --> 00:05:45,420
par de signos de exclamación aquí, al final recibo un error y ese error se produce porque no se me permite escribir y

72
00:05:45,420 --> 00:05:49,190
Firebase por lo tanto bloquea el acceso y devuelve una respuesta de error.

73
00:05:49,190 --> 00:05:54,890
Así que ahora necesitamos aprovechar el token que está almacenado en un reductor y realmente agregarlo

74
00:05:54,890 --> 00:05:56,360
a nuestras solicitudes salientes.

75
00:05:56,360 --> 00:06:00,940
Ahora, para eso primero, necesitamos registrar este reductor en nuestro

76
00:06:00,950 --> 00:06:08,300
reductor raíz, así que en la aplicación. js, necesitamos importarlo, necesitamos importar el reductor de autenticación de la tienda y allí

77
00:06:08,300 --> 00:06:14,780
la carpeta de reductores y allí, el archivo de autenticación y agregarlo a los reductores combinados, tal vez esté aquí con la clave de autenticación

78
00:06:14,780 --> 00:06:20,030
pero, por supuesto, puede usar cualquier llave que quieras Eso nos permitirá aprovechar esto y

79
00:06:20,240 --> 00:06:26,360
acceder a este token, pero ahora tenemos que adjuntarlo a las solicitudes salientes, por ejemplo, para

80
00:06:26,360 --> 00:06:29,450
productos que necesitamos adjuntarlo a la solicitud que

81
00:06:29,510 --> 00:06:38,090
enviamos para actualizar productos, por lo que sería esta solicitud aquí. Ahora, la forma en que agrega una solicitud en Firebase se puede

82
00:06:38,090 --> 00:06:44,570
encontrar en los documentos oficiales de Firebase para la autenticación de usuario de la base de datos en tiempo

83
00:06:44,570 --> 00:06:52,640
real aquí, al final lo que aprendió es que puede agregar un token a su solicitud saliente simplemente agregando esa consulta de autenticación parámetro

84
00:06:52,760 --> 00:06:55,540
al final de su URL de solicitud.

85
00:06:55,790 --> 00:06:59,690
Entonces, aquí al final, necesitamos agregar un signo de interrogación de

86
00:07:00,080 --> 00:07:06,160
igual y luego aquí, necesitamos tener nuestro token. Ahora, ¿cómo podemos acceder al token aquí?

87
00:07:06,180 --> 00:07:12,790
Estamos en el creador de la acción, lo que significa que no tenemos acceso fácil a la

88
00:07:13,070 --> 00:07:20,390
tienda aquí, a la tienda Redux, ¿o sí? Redux Thunk, ese paquete agradable que nos permite escribir esta sintaxis

89
00:07:20,390 --> 00:07:24,720
con esa función que recibe la función de envío, que realmente nos da algo dulce.

90
00:07:24,800 --> 00:07:30,860
También podemos cambiar un poco esta función y no solo obtener el despacho, sino también obtener un segundo argumento,

91
00:07:30,860 --> 00:07:35,250
que es otra función que nos da acceso al estado de Redux, por

92
00:07:35,510 --> 00:07:43,230
lo que tenemos acceso al estado actual de nuestra tienda Redux. Entonces, si la consola registra el resultado del estado get aquí,

93
00:07:43,230 --> 00:07:45,300
veamos qué nos da eso

94
00:07:45,300 --> 00:07:51,860
y para evitar errores, por el momento, aquí agregaré una cadena vacía para que podamos probar este código.

95
00:07:51,870 --> 00:07:56,400
Por supuesto, esto no funcionará, pero lo arreglaremos pronto, así que veamos qué hay dentro de ese estado si ejecutamos

96
00:07:56,400 --> 00:07:56,700
esto.

97
00:08:00,000 --> 00:08:00,540
Entonces,

98
00:08:00,570 --> 00:08:03,660
es hora de volver a iniciar sesión muy rápido y

99
00:08:04,550 --> 00:08:09,010
luego ir a la pantalla de administración e intentar editar esto, que por supuesto todavía

100
00:08:09,970 --> 00:08:13,300
fallará, pero eso no importa porque ahora si hago clic aquí,

101
00:08:13,420 --> 00:08:19,690
sí falla, pero lo que verás es que aquí en el registro, lo que obtenemos es una salida completa de nuestra

102
00:08:19,780 --> 00:08:22,270
tienda completa de Redux. Esta es nuestra tienda

103
00:08:22,270 --> 00:08:28,570
Redux, obtenemos un objeto con nuestro segmento de estado de autenticación que tiene otro objeto más con nuestro token y con la

104
00:08:28,570 --> 00:08:34,880
ID de usuario, nuestro segmento de estado de tarjeta, nuestro segmento de estado de pedidos y nuestro segmento de estado de productos.

105
00:08:34,960 --> 00:08:40,540
Entonces, esto me permite obtener acceso a mi tienda Redux y obtener acceso al token, por lo que

106
00:08:40,540 --> 00:08:48,060
el token se puede obtener ejecutando getState. auth. token porque esto nos da acceso a

107
00:08:48,070 --> 00:08:53,890
nuestra tienda Redux completa, luego nos da acceso al segmento de autenticación y esto a la propiedad de

108
00:08:53,890 --> 00:08:59,810
token que estamos administrando en ese segmento de autenticación. Y ahora, en el creador de

109
00:09:00,090 --> 00:09:09,440
acciones de productos, podemos agregar este token aquí al final. Entonces, aquí podemos reemplazar esta cadena con la variable de token que

110
00:09:09,440 --> 00:09:11,600
contiene nuestro token y

111
00:09:11,600 --> 00:09:17,330
ahora si guardamos esto, con este pequeño cambio, si ahora iniciamos sesión nuevamente y luego

112
00:09:17,390 --> 00:09:20,000
lo cambiaremos de tal manera que no

113
00:09:20,000 --> 00:09:27,490
necesitemos constantemente volver a iniciar sesión, no se preocupe. Si iniciamos sesión nuevamente, vamos a admin, hacemos clic en agregarlo aquí y ahora

114
00:09:27,710 --> 00:09:33,800
intentamos esto, esto funciona nuevamente porque ahora el token está agregado, Firebase lo valida y determina que es válido porque, por supuesto,

115
00:09:33,830 --> 00:09:35,890
no nos hemos mezclado con él.

116
00:09:35,900 --> 00:09:39,170
, es un token válido y, por lo tanto, esto simplemente funciona.

117
00:09:39,200 --> 00:09:43,190
Ahora no solo necesitamos el token cuando actualizamos nuestros productos, también

118
00:09:43,190 --> 00:09:48,410
lo necesitamos cuando agregamos un nuevo producto. Copiaré esa lógica y agregaré la misma lógica

119
00:09:48,410 --> 00:09:54,310
aquí, cuando creamos un producto, obtengo mi token con la ayuda de ese segundo argumento que podemos

120
00:09:54,310 --> 00:09:56,330
obtener aquí si lo necesitamos,

121
00:09:56,440 --> 00:10:03,320
la función get state y esto me permite cambie estas comillas simples a ticks de retroceso para que pueda agregar convenientemente

122
00:10:03,320 --> 00:10:09,530
ese parámetro de consulta aquí al final con un signo de interrogación de igual a igual a mi token.

123
00:10:09,530 --> 00:10:15,300
Entonces, ahora podemos crear un producto y actualizar un producto, por supuesto, eliminar también es una

124
00:10:15,410 --> 00:10:22,430
solicitud de escritura, por lo que para eliminar el producto haré lo mismo, obtener acceso a mi tienda con la función

125
00:10:22,430 --> 00:10:29,130
get state aquí y luego también agregar un signo de interrogación de aquí al final y agregue el token.

126
00:10:29,300 --> 00:10:30,290
Entonces esa es una cosa.

127
00:10:30,320 --> 00:10:36,260
Ahora en los pedidos, es algo similar, allí para buscar, no lo necesitamos, pero para agregar lo hacemos porque

128
00:10:36,290 --> 00:10:38,260
agregar es una operación de escritura.

129
00:10:38,480 --> 00:10:45,110
Entonces, obtenemos el estado si lo deseamos, podemos extraer el token de allí con el mismo enfoque que antes y

130
00:10:45,110 --> 00:10:52,880
podemos agregar esto aquí y allá, en realidad también necesitaremos el ID de usuario pronto, así que nos ocuparemos sobre esto en la próxima

131
00:10:52,880 --> 00:10:54,860
conferencia, pero por ahora, solo

132
00:10:54,860 --> 00:10:57,810
asegúrese de agregar el token a todas partes y

133
00:10:57,890 --> 00:11:02,570
ahora veamos cómo podemos asegurarnos de que los pedidos realmente pertenezcan a nuestro usuario.