Entonces, ¿cómo podemos salir de esta pantalla de autenticación ahora si hemos iniciado sesión o si nos registramos correctamente?
Bueno, eso no es demasiado difícil.
Si superamos este envío aquí sin aterrizar en el bloque catch, por lo que todavía
está aquí en el
bloque try, podemos llamar a los accesorios. navegación. navegue como siempre lo hicimos y
navegue a las diferentes pantallas que configuramos en nuestro
navegador de cambios, en este caso a la pantalla de la tienda. Así que hagamos eso, simplemente vayamos de compras y allí por
ahora tan pronto como iniciemos sesión con éxito, lo que haré ahora, esto se carga
y estamos aquí. Ahora recibiré una advertencia
aquí con respecto a alguna actualización de estado que no se pudo realizar, ese conjunto
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
pantalla si ya no estamos en la pantalla, por lo que simplemente podemos moverlo al bloque catch porque solo necesitaremos restablecer la carga
si tenemos un error porque ese es el único caso cuando permanecemos en la pantalla de autenticación, de lo
contrario no necesitamos cambiar el estado de
carga porque de todos modos estamos dejando la pantalla. Entonces con eso, también nos
libraremos de esto, si
ahora lo intento de nuevo, aquí vamos y
ahora
estamos en nuestra tienda principal. Ahora, por supuesto, todavía no estamos utilizando
el token, así que asegurémonos
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é
estado queremos comenzar y cuál es nuestro general La forma del estado es
y allí quiero almacenar el token que inicialmente es nulo y quiero almacenar el ID de usuario que
inicialmente es nulo, por lo que el estado inicial es muy básico.
Entonces podemos exportar la función reductora que toma ese estado inicial y que también recibe, por supuesto,
una acción y aquí quiero cambiar el tipo de acción como siempre y obtuve dos casos en
los que estoy interesado en este momento.
Una es la acción de inicio de sesión, por lo que debe importar este identificador desde la carpeta de acciones y el
archivo de autenticación allí y el otro caso es la acción
de registro, por lo que
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
estar el token, digamos acción. token y userId deberían ser acciones. userId y esa es la misma
actualización que necesito para registrarme para que podamos copiar eso allí.
Ahora, por supuesto, debemos asegurarnos de que nuestra acción contenga token y userId, por lo que
en el creador de la acción al final del registro aquí cuando despacho la acción de registro, necesitamos agregar un campo de
token y necesitamos agregar un ID de usuario campo.
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
identificación pero es localId y ves que aquí en el registro, localId, aquí está el userId y si
te desplazas hacia arriba , ID token, ese es el token. Eso es lo que envío aquí y podemos
copiarlo y usar lo mismo, casi lo mismo para iniciar sesión,
lo único que debe cambiar es este identificador e incluso puede unir el inicio de sesión y registrarse en
un identificador de autenticación combinado, digamos porque en un reductor, estamos haciendo lo mismo de todos modos.
Así que solo lo he dividido aquí para dejar en claro que tenemos dos cosas diferentes al final, pero la
actualización es la misma, por lo que definitivamente podríamos combinar estos dos tipos de acción.
Entonces, con eso, ahora estamos almacenando el token y eso es bueno,
pero ¿para qué necesitamos este token nuevamente?
Necesitamos ese token que ahora estamos almacenando para acceder a nuestra API y para eso, vamos a Firebase y a la
base de datos.
Tenga en cuenta que cuando configuramos esta base de datos, mencioné que debe comenzar en
este modo de prueba si lo recuerda. Lo que esto hizo es que estableció ciertas reglas y puede verificarlas
si hace clic en la pestaña de reglas. Esto controla quién puede leer y escribir en su
base de datos y en este momento esto está configurado como verdadero, lo que significa que todos pueden leer todo y
todos pueden escribir todo.
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
debería ser comillas dobles, pero esta es la sintaxis de Firebase y puede obtener más información sobre las reglas aquí
al haciendo clic en obtener más información o simplemente google for Firebase reglas de seguridad
de bases de datos en tiempo real.
Lo que esto le dice a Firebase es que solo los usuarios autenticados, por lo que solo los usuarios
que envían la solicitud con un token válido deberían poder leer y escribir.
Ahora incluso podría argumentar que Redux siempre debería estar
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
productos está permitido, Redux
de los pedidos no lo es,
pero nuevamente eso es algo que puede verificar con los documentos oficiales.
Iré con la configuración donde Redux siempre está permitido pero la escritura no.
Entonces, para escribir, necesitamos un token,
de lo contrario nos enfrentaremos a un problema. Si iniciamos sesión aquí y estamos almacenando el token pero no
lo estamos agregando a las
solicitudes en este momento, verá que podemos
cargar todos los datos, está bien, pero también notará que si intento editar esto y eliminar un
par de signos de exclamación aquí, al final recibo un error y ese error se produce porque no se me permite escribir y
Firebase por lo tanto bloquea el acceso y devuelve una respuesta de error.
Así que ahora necesitamos aprovechar el token que está almacenado en un reductor y realmente agregarlo
a nuestras solicitudes salientes.
Ahora, para eso primero, necesitamos registrar este reductor en nuestro
reductor raíz, así que en la aplicación. js, necesitamos importarlo, necesitamos importar el reductor de autenticación de la tienda y allí
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
pero, por supuesto, puede usar cualquier llave que quieras Eso nos permitirá aprovechar esto y
acceder a este token, pero ahora tenemos que adjuntarlo a las solicitudes salientes, por ejemplo, para
productos que necesitamos adjuntarlo a la solicitud que
enviamos para actualizar productos, por lo que sería esta solicitud aquí. Ahora, la forma en que agrega una solicitud en Firebase se puede
encontrar en los documentos oficiales de Firebase para la autenticación de usuario de la base de datos en tiempo
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
al final de su URL de solicitud.
Entonces, aquí al final, necesitamos agregar un signo de interrogación de
igual y luego aquí, necesitamos tener nuestro token. Ahora, ¿cómo podemos acceder al token aquí?
Estamos en el creador de la acción, lo que significa que no tenemos acceso fácil a la
tienda aquí, a la tienda Redux, ¿o sí? Redux Thunk, ese paquete agradable que nos permite escribir esta sintaxis
con esa función que recibe la función de envío, que realmente nos da algo dulce.
También podemos cambiar un poco esta función y no solo obtener el despacho, sino también obtener un segundo argumento,
que es otra función que nos da acceso al estado de Redux, por
lo que tenemos acceso al estado actual de nuestra tienda Redux. Entonces, si la consola registra el resultado del estado get aquí,
veamos qué nos da eso
y para evitar errores, por el momento, aquí agregaré una cadena vacía para que podamos probar este código.
Por supuesto, esto no funcionará, pero lo arreglaremos pronto, así que veamos qué hay dentro de ese estado si ejecutamos
esto.
Entonces,
es hora de volver a iniciar sesión muy rápido y
luego ir a la pantalla de administración e intentar editar esto, que por supuesto todavía
fallará, pero eso no importa porque ahora si hago clic aquí,
sí falla, pero lo que verás es que aquí en el registro, lo que obtenemos es una salida completa de nuestra
tienda completa de Redux. Esta es nuestra tienda
Redux, obtenemos un objeto con nuestro segmento de estado de autenticación que tiene otro objeto más con nuestro token y con la
ID de usuario, nuestro segmento de estado de tarjeta, nuestro segmento de estado de pedidos y nuestro segmento de estado de productos.
Entonces, esto me permite obtener acceso a mi tienda Redux y obtener acceso al token, por lo que
el token se puede obtener ejecutando getState. auth. token porque esto nos da acceso a
nuestra tienda Redux completa, luego nos da acceso al segmento de autenticación y esto a la propiedad de
token que estamos administrando en ese segmento de autenticación. Y ahora, en el creador de
acciones de productos, podemos agregar este token aquí al final. Entonces, aquí podemos reemplazar esta cadena con la variable de token que
contiene nuestro token y
ahora si guardamos esto, con este pequeño cambio, si ahora iniciamos sesión nuevamente y luego
lo cambiaremos de tal manera que no
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
intentamos esto, esto funciona nuevamente porque ahora el token está agregado, Firebase lo valida y determina que es válido porque, por supuesto,
no nos hemos mezclado con él.
, es un token válido y, por lo tanto, esto simplemente funciona.
Ahora no solo necesitamos el token cuando actualizamos nuestros productos, también
lo necesitamos cuando agregamos un nuevo producto. Copiaré esa lógica y agregaré la misma lógica
aquí, cuando creamos un producto, obtengo mi token con la ayuda de ese segundo argumento que podemos
obtener aquí si lo necesitamos,
la función get state y esto me permite cambie estas comillas simples a ticks de retroceso para que pueda agregar convenientemente
ese parámetro de consulta aquí al final con un signo de interrogación de igual a igual a mi token.
Entonces, ahora podemos crear un producto y actualizar un producto, por supuesto, eliminar también es una
solicitud de escritura, por lo que para eliminar el producto haré lo mismo, obtener acceso a mi tienda con la función
get state aquí y luego también agregar un signo de interrogación de aquí al final y agregue el token.
Entonces esa es una cosa.
Ahora en los pedidos, es algo similar, allí para buscar, no lo necesitamos, pero para agregar lo hacemos porque
agregar es una operación de escritura.
Entonces, obtenemos el estado si lo deseamos, podemos extraer el token de allí con el mismo enfoque que antes y
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
conferencia, pero por ahora, solo
asegúrese de agregar el token a todas partes y
ahora veamos cómo podemos asegurarnos de que los pedidos realmente pertenezcan a nuestro usuario.