Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end Vs Front end - Vídeo 32 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 16 de agosto de 2024 por Mario S.

22 visualizaciones

Cogiendo todas las cookies recibidas desde el backend en el front end. Utilizamos la librería js-cookie. Trabajamos con las credenciales de Axios y de CORS.

Más información Transcripción

Descargar la transcripción

Well, in this video we are going to continue working on how to get the cookies. In the previous video 00:00:00
we saw why we cannot use the context variables to be able to make the protected routes. 00:00:07
We saw that every time we load one of the pages associated with a route, 00:00:20
everything is updated, then useEffect we could not use it, okay, then, well, 00:00:30
we saw that if we logged in, if it created the context for us, 00:00:41
ok if it put us the true state variable yes it returns the data it does not do everything 00:01:04
well but with this is with what we cannot work we need to work with the 00:01:14
cookie ok that generates us with the cookie called touch then here we are going to work with two 00:01:20
following two steps first as we take from here from the front that cookie is worth that we need to use 00:01:29
a library because this js which is the js medium cookie to be able to take it is worth here I have the 00:01:43
official page of js cookie of npm ok and here you have all the set the get to 00:01:55
take any or all the cookies that there are or only one that we can take it by 00:02:04
the name is worth taking its value that in the end is what we are going to do and then 00:02:08
once we have that cookie we are going to send it back to the backend the backend 00:02:15
will have to play again with the json web token with the jwt and we will compare those cookies to 00:02:21
see that that user who says that it is authenticated is authenticated, it is true, then we have 00:02:30
to do those two steps, we go with the first one, then in the first one we had created a juice effect 00:02:36
We had created the useEffect. Where are you? 00:02:53
Here you are logged, log in. This was to clean up the whole thing. 00:03:28
We had the app.js, we had done, ah, protected routes. 00:03:38
We had protected routes in JSX, which we have as such, 00:03:46
hanging directly from here 00:03:52
and what we had done was this if it was authenticated then we used this 00:03:57
we tried that if it was not authenticated to send it again to login 00:04:04
ok what didn't work for us was this ok 00:04:08
this is what we had done at the end of the previous video ok then now in 00:04:13
the out context what I want to do is a use effect that controls those cookies 00:04:18
then the first thing I'm going to do is load the js library 00:04:26
ok then we are going to stop this from the 00:04:32
client folder where we have all the part of the client we are going to put the 00:04:42
npm and js ok we are going to put this and we install it ok it is already once installed in the file 00:04:47
well we start our part of the client obviously ok we already have it ok ok then 00:05:04
what I am going to do now is in the file outcontext.jsx we are going to use that js that we finished 00:05:14
js-media cookie that we have just installed we are going to put the import we are going to call it 00:05:28
ok ok and well we are going to use it in a you set effect then here we had the to control 00:05:47
the errors ok we are going to and we are going to do another one here that 00:06:06
is going to control only when that page is loaded, okay, then I'm going to tell you that I'm not going to 00:06:24
pass any parameter in particular, I want it to be when the page is loaded, so 00:06:35
at the time when it detects that there is some type of change, okay, which is what I get when I 00:06:39
pass this list in empty then it is when you go to 00:06:44
to do everything that we put in here in this case we are going to put a cons here we are going to call it 00:06:53
cookies for example to take them all then with this cookie that we have imported from 00:07:04
js cookie what I can do is take all the cookies that we have received from the 00:07:14
bucket ok then here I can take it and tell it 00:07:21
cookies this we are going to put the best in because in the end if I am going to take all the points that are worth there I take them all ok 00:07:28
what I do now is to ask you if there is a cookie point called the touch 00:07:46
is worth if there is one called touch which is the one that we have generated then 00:07:58
for now to see if it does everything for us well we are going to put it we are going to say that it 00:08:03
visualize it, it is worth cookies by console dot log ok and this would visualize us that that is that 00:08:08
and if everything is fine we are going to see what happens we are going to take we are going to tell him mario.santos 00:08:20
1 2 3 4 5 and 6 ok and we log in here in data it is giving us all the data 00:08:31
ok it is not giving me that cookie we are going to see it anyway for example from the network if I 00:09:04
pongo aquí aquí sí que la tengo y en aplicaciones no me la está generando no vale no me lo está 00:09:11
generando vale entonces vamos a porque eso puede ser un problema de axios vale por el tema de las 00:09:21
credentials then what I am going to do is we are going to modify a little this way of working with 00:09:33
axios to create a new file I am going to do how to overwrite the action the axios is worth then 00:09:43
I am going to create a new file that I am going to call axios.js 00:09:53
and here we are going to import and import axios from axios ok then what I want to do is 00:10:02
initializar yo darle unas unos valores iniciales a axios y luego con esos valores iniciales ya 00:10:19
configurar el out js a ver si con eso si nos deja vale entonces tenemos el axios vamos a crearnos 00:10:30
a constant that we are going to call distance, for example, which is going to be equal to axios.create, 00:10:41
okay, to initialize it, and here we are going to put it in three keys and here we are going to pass those 00:10:53
values ​​that we want to initialize, for example, the url base, which is where we used to call it api, 00:11:02
because we can only pass it from here so here I am going to put the http 00:11:09
is the slash localhost two points the 4000 which is where we have our server this was 00:11:17
villa blanca no lo voy a ver es villa blanca y dan 2 vale pues villa blanca y dan 2 vale y además 00:11:29
del beige url lo que le voy a pasar es el con credenciales with credencial vamos a pasar este 00:11:47
true ok and this because obviously we export it it is by 00:11:55
ok then good because it is a way to initialize axes it is worth not using it as it is and that's it 00:12:09
we can pass a series of attributes in this case the one of credentials and the url base 00:12:20
then if we come now to the out js well this one is no longer going to be 00:12:26
need axios I'm not going to import it from axios what I'm going to import is 00:12:34
axios from my js 00:12:43
ok then we import axios from 00:12:49
.js by this 00:13:01
this will be more imported the instance 00:13:10
this is fine 00:13:22
the one I have put wrong, what I am going to import is Instance, okay, and here what we are going to put is 00:13:25
Axios, Instance, API, we don't want it anymore, because it no longer exists, okay, here I am going to do the same, 00:13:41
instance ok then we have post instance post instance and this now we are going to see if it would work for us 00:13:55
or not in principle I think that's it ok it's a credential problem this is mario.santos 00:14:12
arroba educa punto madrid punto rg 5 y 6 lograrse vale y aquí 00:14:18
vale me da un error de course me da un error de de course este error es 00:14:40
is for the back-end, okay? So, let's go to the back-end, and in the back-end, 00:14:51
let's see, we're going to go to SRC, in SRC we're going to go to the appjs, you're seeing the code, 00:15:10
not all the time if it is worth ppjs and then here we had where you are the yus course it is worth remembering 00:15:20
that we had also put the origin parameter then in addition to that origin parameter 00:15:29
we are going to put another one that is the one of the credentials so that it sends it with the credentials 00:15:36
is worth the same as we had said in the front that with the wii credential because here I pass 00:15:42
credentials, okay, let's see if that's the case, if he takes it from us, then we try it again 00:15:48
two to roma educa.madrid.org password points 3 4 5 and 6 I see it 00:15:59
well now it is already taking it, you see the touch is here, here it has our touch, 00:16:13
that is, it does not have the director, okay, this is the same, the same problem that was giving me before, 00:16:24
but hey, at least I do have access to that touch, okay, I keep having access to all the 00:16:31
to all my context ok and now it is with that touch is to send it to the back end and there we have to 00:16:40
make several changes ok then what interests me in this video is first to remind you 00:16:52
of when we are taking that touch that we have generated as a cookie first we have to install 00:16:57
the js cookie but then also for security reasons as it cannot be otherwise 00:17:04
hay que ir pasando esas credenciales vale y entonces con las credenciales bueno fijaros 00:17:10
que es solo jugar con axios es meterle esos valores iniciales ese with credencial con a 00:17:18
true variante con esta línea me valdría vale y luego llamar desde aquí en vez de axios punto 00:17:26
post or this one, as we have created it, we have overwritten it, we call it with an instance or as 00:17:33
you have already called it, it is worth and within the outcontext the use effect that in the end what you do is 00:17:41
declare a variable with cookie js medium cookie dot get that what you do is take all those 00:17:49
variables and then questions for with the point and the name of that cookie for which you want to 00:17:58
take information that in this case is touch ok here we have taken it and we have 00:18:05
printed it directly well here I should be showing 00:18:13
and it is that I do not know how it shows me well the case is that I have it here and if not you already know it is worth 00:18:21
in the part of the network that you have that token should appear and if not in the application it should also 00:18:49
appear here directly if it does not appear it is because of the theme of course it is good because this video I 00:18:55
leave it here now the next one that is already the last one that I do with this theme of the 00:19:01
privates 00:19:06
well, we have already finished and so we make all the changes that are made in the back-end 00:19:11
and we already leave everything done, it is worth practically exterminating the development, I do it in two 00:19:18
videos because if there are several changes then I think that if I do not think that it is better in two and so 00:19:26
no volveros la cabeza demasiado loca vale hasta aquí es fácil porque escoger la cookie ya está 00:19:31
y el yusef efe vale pero ahora bueno el volver a el jw t volver a ese token que le estamos 00:19:37
enviando desde el cliente desde el front al back end y ahora una vez que lo hemos verificado volver 00:19:47
a enviárselo al back end os podéis volver un poco más locos vale entonces el siguiente vídeo 00:19:54
I'll do that. A greeting guys, see you later. 00:19:59
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
22
Fecha:
16 de agosto de 2024 - 21:37
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 15″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
61.16 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid