Saltar navegación

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

Back end Vs Front end - Vídeo 31 - 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.

13 visualizaciones

Primera aproximación a las rutas protegidas. ¿Por qué no podemos utilizar las variables de estado creadas en el contexto?

Más información Transcripción

Descargar la transcripción

well in this video we are going to see we are going to start working with protected routes 00:00:00
we are going to make a plan that we could we could think that it can work for us and 00:00:08
in reality it can never work for you when dealing with different pages but I think it is 00:00:24
interesting to see that error that provides us for possible or future problems that you can have 00:00:29
know where it can come from ok and why do we use a cookie instead of using the context when 00:00:42
in theory you could go to think that with the variables that we have saved from the context 00:00:50
could be useful to us at the time of making the protected routes, it is worth before starting with the 00:00:57
protected routes, well, we can give it a if you want a brush to all this interface 00:01:05
to the login to the register for example what is usually done well we have here 00:01:12
when we have mapped the errors, it is worth doing well, well, 00:01:20
that it appears to us here, we are going to remove it and so we see it, for example, something like that, it is worth that 00:01:33
the errors that came from thought appeared to us, we mapped them and we had made our 00:01:44
tip so that he would put it to us one by one through the index of the one here that we have passed him, 00:01:52
okay, then, well, when there was some kind of error, remember that with the soft before 00:02:00
the data reached the backend we could verify them and then we could show them from 00:02:06
our front ok this is fine and in this we stayed the other day but well once they are 00:02:12
for example and it is usually done like this, you do not show those errors but you do not leave them there 00:02:20
all the time or yes, well, you can already consider it but one of the options that is 00:02:28
usually used is usually the good one because I show you the errors that you have when logging 00:02:36
of registering but maybe at 10 seconds at 5 seconds at 2 00:02:41
seconds because I want them to be removed and the interface remains as 00:02:50
original originally then how can I do that and from where I am going to do it 00:02:58
Well, we have already used the useEffect, which allows us to control that change when there is some type 00:03:05
of load, some type of state variable of the provider. With the useEffect it allows us to 00:03:24
control that type to see that change that has occurred and then from detecting 00:03:31
that event that change we can do one thing or another or do nothing is worth a little as 00:03:41
can be the events of any object in programming then on the one hand we are going to use the 00:03:51
use effect and where we can use this, well, if we take a look at it, we think, well, 00:03:59
here what we are using to show this information of the invalid email and the password 00:04:05
must have at least six characters is where we have mapped those errors, well, those 00:04:12
errors we have mapped on the page in this case of the login page is worth 00:04:21
but we received them on the out context page is worth then let's go to the 00:04:28
out context page and on the out context page remember this line is worth here is where we 00:04:40
we received all the errors in this case of zot ok and we put if any error occurred 00:04:46
in the variable in the arrow function or anonymous of logged and in the one of logging ok we had 00:04:53
the set error ok because it was a state variable that is array type and it is here where we were 00:05:03
receiving all this information ok then this information remember that with the provider 00:05:08
what we did was the context then we had access to all or from all the routes that 00:05:14
were part of the context because we had access to that information, it seems that if we are 00:05:22
collecting here or we have the error state variable here, well, we can use the use 00:05:32
effect from here from here it is worth then how are we going to use the use effect the first thing we do is 00:05:41
import the use effect effects from real it is worth that as always it is from where it is from where we 00:05:52
import it is worth once imported you know we can use it is worth once we have imported it 00:06:09
we are going to use it then what are we going to do because a little what we are doing constantly 00:06:16
it is worth in this case the joseph it is worth joseph if you remember it had good it used to be we used it with 00:06:25
an arrow function that did some operations, it is worth and when 00:06:43
when what we did was the use effect we told him we could pass him remember the variable that we were going 00:06:55
to control or if not or if it is none, it is worth then that they were all inside he did not pass any 00:07:09
o las diferentes variables que fuéramos a utilizar siempre entre corchetes acordaros en este caso yo 00:07:16
lo que quiero es decirle bueno con you se fed me vas a hacer todo lo que te voy a poner aquí en 00:07:24
medio entre estas dos llaves cuando haya un cambio en la variable de estado de error vale cuando hay 00:07:30
una un cambio en la variable de estado de error cuando al lograr me o al registrar me se produce 00:07:36
some type of error and then it is putting those values that are those array entries with 00:07:44
the set error it is worth remembering that that dog was always associated with that variable of state 00:07:51
ok then I am good the structure would be this ok now what is it What do I want you to do 00:07:58
when a change occurs in the state variable of error what I want is first to know what 00:08:08
type of change has occurred ok then we know that in errors there is a is a is an array 00:08:20
that is why we can map the map point we do it when they are arrangements a 00:08:28
is worth if we cannot do it then what is what when we want to hide that information or when 00:08:35
that information is shown on our interface is worth here in red when that array is greater than 00:08:46
0 if it is greater than 0 is that some error has occurred somewhere and then there it has loaded 00:08:53
the different components of the array but if it is equal to zero it means that it has made 00:08:59
the operations and no error has occurred ok then what are we going to ask if error 00:09:05
point and as always in the arrays there will be a link ok and this one we are going to ask if it is greater 00:09:14
than 0 or not ok ok ok if it is greater than 0 or not good then 00:09:30
ok what we want is that when a certain time passes 00:09:43
put the zero line in such a way that the page would load again and when 00:09:49
put the zero line in our front will understand that there is no error then 00:09:56
is going to remove them, which is what we are looking for, then from javascript there is a 00:10:01
good one because as always we are not going to have to be able to work with the times there is a 00:10:11
library the time that leaves us different functions to work with the time is worth then one of 00:10:15
functions is the time out, it is worth that if you look for it, it will appear out there the time out 00:10:24
here you are ok then well here they are 00:10:38
description ok here for example time out then look at it is an arrow function 00:10:45
we are going to come to the page so that you can see it well an arrow function in this case it only puts 00:10:53
a delay of a delay of a second and then it tells me that delay we put it down here 00:11:00
ok here it puts it in quotation marks 00:11:09
well I would swear that we do not need these quotes but we are going to see it right now ok 00:11:14
then we put the set time out the operation that is valid and the time this is the function of the set 00:11:21
time ok this is like a process it is an independent process that stays there running and 00:11:28
here we have to take into account a little thing we can put it like this and it will work for us ok 00:11:37
but it will leave us that process there dead that of course if we use it many times because it is something 00:11:44
there is a thread that is there that is not doing anything but it is there it is worth then you already know that 00:11:50
always yours is if once that process is not finished killing it is worth then there is also 00:11:56
a there is a function that is the clear time out that what its function is just that it is worth 00:12:04
clean that process, kill that process as you want, okay, well, then let's go 00:12:14
to our code 00:12:25
and then we are going to start putting here, okay, if errors point lenga is greater than zero, then 00:12:29
what do I want it to do to me, well, believe me, a variable because I am going to call it in this case 00:12:37
time, for example, for example, this is going to be the same as the set time out, there we have it, okay, and as 00:12:43
we have said that it is that function, an arrow function as an input parameter, we have nothing 00:12:56
ok how 00:13:01
now we are going to put it in here which is what the console said in the help log is worth 00:13:12
we are not going to tell it we what we want is that it puts the arrangement to zero well because it 00:13:17
erases the data from the arrangement so to erase the data from the arrangement what we put on it 00:13:23
because it is easy it is not a state variable that we know that to modify it we play with the 00:13:28
set errors is worth the same as we were putting here and what is what we put on it because in battery 00:13:34
is worth when we want it to do this for us, for example at 00:13:41
2.5 seconds for example I am going to put it without quotation marks because it has been strange for me to see on the 00:13:50
page is that I have opened 00:13:56
well, that information if I missed it, it is worth going to put it in quotation marks to 00:14:01
see if it does it for us or not, okay, I could have left it like that, which is 00:14:06
what I was commenting on, but 00:14:12
we could have taken it and this to see it left without this part is worth having 00:14:19
left it like that and it will work for us but it would leave us that process there also to not have it 00:14:25
linked to any variable or anything like that I do not have it referenced well it does not seem a good 00:14:35
practice, okay, so here we are going to put this 00:14:42
like this, okay, we're going to leave it with the time and such, okay, and what am I going to 00:14:52
tell you that 00:14:58
if the error is not greater than zero, that is, it is 00:15:01
equal to 0 then what you are going to return to me is a return and we are going to put another arrow function 00:15:06
that on this side is that is, in this line it is very easy because the time out and time is clear, okay, okay, 00:15:20
then we tell him, well, if error is greater than zero, that is, there is some kind of error in 00:15:36
our error array to then map it and if such and that it does not draw it 00:15:44
we launch the set error we reset it when 2.5 seconds pass these are milliseconds remember 00:15:52
y si esto es igual a cero el error punto online es igual a cero entonces pues mata si hay algún 00:16:01
proceso con tiempo mátalo vale bueno si esto está bien nos debería funcionar ahora entonces 00:16:08
vamos a probarlo vamos a poner aquí bueno esto ya sabíais que funcionaba valentes mario santos 00:16:16
arroba educar para su humor 1 2 3 vale aquí le damos veis ha estado 2,5 segundos que sabría terminarlo 00:16:25
y se quitan vale entonces bueno pues es una opción que podemos tener podemos utilizar no queda mal 00:16:45
ok and well, it is a bit to you as designers if you like it or not you see 00:16:53
that the form has been very easy it has been we are in the code if the form has been the effect 00:17:04
is worth remembering always the effect has been good to know the set time out the clear time out the 00:17:11
variable and the state that we have already used it, well, with these few lines of 00:17:21
code we can do what we are what you have seen, okay, what else could we do in our 00:17:29
in our front, well, another other thing that is usually used or used to do a lot of 00:17:39
developers in the front part man if I'm logging in but you know that 00:17:47
when you go to log somewhere if you don't have if you are not registered 00:17:55
it also gives you here it usually puts here at the bottom 00:18:00
usually put 00:18:04
register now or something like that and then the register is valid to be able to go 00:18:08
directly to the register and it usually distributes it down here it is worth it because with the flex if you 00:18:15
remember that we could distribute it in this width it is worth then we can also do that 00:18:20
to do that where we are going to do it well because this is also part of the interface of the 00:18:28
own interface then we can go to the page of the login page 00:18:34
and well here it would be under the summit button if we can put it here for example under the 00:18:43
form ok there we could put a paragraph here I am going to leave it as you want, 00:18:51
notice that now I am putting all the time before I only put the class but if I look at 00:19:04
some of the videos these that I was doing that it works and then it does not give it as a 00:19:11
critical error but it does tell you that it is good that you use the class name ok then well I am not going to 00:19:20
change it in all the places but if you will see that now I use the class name well so that 00:19:26
correct it at some point I will correct it because in all these parts I will correct them I will do a 00:19:33
search of everything where I put class and I will put the name and that's it, okay, but now, well, right now 00:19:41
it gives me a little, it gives me a little the same because of what I tell you, okay, because it gives me the warning but nothing 00:19:49
else is worth then what do I do here well on the one hand we are going to put that text that is 00:19:54
you are not registered, for example, you are not registered, it appears to me here, 00:20:04
okay, and what do I want too, well, we are going to change it a little, 00:20:16
what we want is for a button to appear here that leads us to register or a link, 00:20:26
ok then you have studied html and you have the hr but here we could use it here what 00:20:35
is usually used is the link ok link is a function that provides us or that we can take from 00:20:46
real router tom remember that we use the just navigate it is worth that then it created the 00:21:00
variable navigate which is in which in the use effect it took me to task it is worth remembering that this 00:21:08
did it automatically we now what we want is that it only takes us when we 00:21:16
a click then I could not use the just navigate but if we could use 00:21:23
the link then with the link what we are going to use and it works exactly the same as the hr 00:21:33
ok then here we are going to put 00:21:40
then link 00:21:47
capital there is worth that it appears in green to this we pass here there is no h 00:21:56
network here there is a to a you is ok link to where we want it to take us 00:22:02
take us to register ok take us to register here we are going to put some options a flash name ok 00:22:09
and we are going to put the registration ok ok and here it has put me to register regis 00:22:23
so register ok it puts everything together everything very ugly well now we are going to start 00:22:35
playing with these classes that the wind gives us and leave it beautiful that we can put here for 00:22:45
example in the paragraph well in the paragraph so that it puts it to the left and 00:22:51
to the right and distributes it well that we had the flex and the flex between you remember that what it 00:22:56
now distribute the information between the width of 00:23:04
the width of that block is worth then well here that we are going to put in this 00:23:10
class because on the one hand the flex and on the other hand 00:23:15
justify between ok then look at how he has already put us on the left and on the 00:23:21
right it does not distribute on one side the text and on the other the link is worth the text not such the link 00:23:30
already appears to us the tip and that the icon takes the shape of the little hand so that you click on it 00:23:36
if we click on it because it takes us to register ok ok then we continue to give this a 00:23:43
certain format then what else can we say because it would not start playing 00:23:50
we are going to put this one in x 00:23:57
here we are going to put two ok this is to put that margin but it doesn't do us anything good 00:24:08
what else can I put here in the class name we can and tell him well it is to register 00:24:18
so that it is different from the text we can take and tell it to be text blue sky this is not 00:24:25
written well sky there and that for example I put it at 500 00:24:41
it is like something like that it is worth then register that it will be something like that 00:24:49
we do not know this is that we start to give it already because the format you want for example 00:24:55
if I put it to change the size we will see 00:25:31
I don't remember the text 5xl has gone away 00:25:38
then we are going to put the text md 00:25:47
xs I can put it is not registered 00:25:59
register here like this 00:26:04
text md 00:26:07
no this is ugly 00:26:17
I leave you the two little ones 00:26:20
we are going to leave the two little ones but let's go that this is already starting to play a 00:26:24
little is worth here I am going to put a margin 00:26:29
in x of 3 00:26:36
in x not in and sorry it is worth that I lower it there a little more 00:26:40
Well, that's it, something like that, okay, I would do the same in registering, but to get me to the login, okay, then, well, it's another option that we have here, so we would have controlled the errors, okay, the same thing we have done before. 00:26:48
here we would go controlling the own errors that we have controlled from the from with 00:27:07
with the form it is worth then there it is already asking us to write something 1 2 3 it is worth we see the 00:27:17
time 22 seconds and a half it goes ok you are not registered so first you have to register 00:27:28
bueno pues podemos ir jugueteando con todas estas cosas vale qué más podemos o qué más así trasteando 00:27:36
con el desarrollo bien estamos controlando los errores desde diferentes sitios desde el 00:27:46
from the model itself that we did with mongoose from the from itself and sometimes when we put 00:27:57
the network if we put to send from the back in an information with a json that we pass a 00:28:07
message or it happens we pass the status directly the status is worth the rest status point I mean 00:28:16
we sent it in different ways and when it comes to collecting that information because it can give us 00:28:24
some other error, it is worth then and to leave it or not that side of the whole 00:28:31
we are following the code in the file of the out context where we have our functions 00:28:43
log in or as you have called it logged in, it is worth remembering that I called it like that 00:28:54
here we took the errors but these errors are what I tell you that they can come in array format or not 00:29:00
and we are working in array format then you can find some type of error that 00:29:06
does not come in array format then the application does not work well for me or an error jumps from 00:29:13
the developer tools, it is worth and you can obviously test it and see it and it does not look 00:29:20
good then here maybe we could and say hey if the error comes in array format great 00:29:29
because you do what you are doing and that's it but if it does not come in array format then take that 00:29:38
error and you put it in the array, it is worth so that it continues to maintain that, that is, if it comes in 00:29:44
string format, you are going to convert it to an element of mine, it is worth how I do that, well, 00:29:51
in the array in the array element there is a condition that is the is array, it is worth what it does 00:30:00
obviously asks if it is an array or not then that I am going to ask him if what comes in error 00:30:13
response point data is array then what is it that I want you to do to me what you are doing to me 00:30:19
until now, which is the set error retun, it is worth error point the response point data 00:30:28
but if this condition is not met then what I want is that this set error 00:30:46
you treat it or that that data that string that is entering as an error you put it as an element 00:30:53
of my radio then what do I do I put it between brackets ok then in this way and also good 00:31:09
as we usually put the message with the point ok well we pass that key remember 00:31:16
that we are with a monkey and then we are with a value key all the time, okay, well, 00:31:25
in this way we can control this, we are going to copy this, I am going to paste it here to have it the same 00:31:30
and it would be worth it then here now if here we put anything 00:31:45
ok then like this if it is not returning it well ok but hey it is a way to make sure 00:31:53
that I will not skip any type of error so weird that if I skipped the other day and playing 00:32:03
with all the code I do not remember how I did it skip ok but well the solution would be this 00:32:10
ok well and here yes I think that with these brushstrokes like this, well, if we start 00:32:19
with what would be the issue of protected routes, it is worth and in the end because I want to make those 00:32:26
protected routes, well, because his thing is to have an initial page in which he is going to show you all 00:32:33
the information of this application that we are doing, it is worth that from there we can go to the login 00:32:43
and the register and nothing else until we are logged in we cannot go for example to task ok we know 00:32:50
that we have here in task ok we have this and here it should not let us enter at the end this route 00:32:58
the task of tasks because the one that we did so that it shows us all the tasks that this 00:33:17
user has there registered is worth then the normal thing is that it will always take us to the login 00:33:22
to the register or much better to the one of a main one, a country that had the napalm and then 00:33:32
pudiera ir al registro a lograr me a las tareas no debería de dejarme vale 00:33:41
bueno un poco esa es la idea eso es lo que queremos conseguir podríamos hacer 00:33:47
eso directamente en las diferentes páginas decir oye no te cargues si por 00:33:54
ejemplo la cookie o el contexto no existen pues sí pues tú puedes ir 00:34:00
haciendo eso página a página lo cual pues ya entendéis que no tiene ningún 00:34:05
sense because of the subject of that you have to go page by page and a change you have to do it on all 00:34:11
the pages and that is one of the principles that you as good programmers cannot do, 00:34:17
okay, so what do we do, well, in principle what we are going to do is a component 00:34:24
that let's go where you are seeing the station the code is worth a component that encompasses those routes 00:34:36
that we want to protect is worth then we have here there are three routes one that is the home another 00:34:51
that is the register and the login is worth then here what I want is to protect these routes 00:34:57
vale todas estas rutas no las quiero tener protegidas la de las tareas la de añadir una 00:35:04
tarea la de bueno modificar si queréis una única tarea y la del profile vale 00:35:16
vale como hago esto bueno esto lo que hacemos es todas estas este conjunto de tareas que las quiero 00:35:28
I will tell you that I want to have them private protected we are going to include them inside another 00:35:39
and then I am going to put it inside another 00:35:58
ok and these are going to be there in global then what is this going to do good 00:36:03
because to this road I am going to call an element is worth a function that is going to control 00:36:19
for me that that context is created remember that we are within the provider of the browser 00:36:30
well we are within the provider so we are within the context so I can 00:36:37
ask in my context if a variable is created that if you 00:36:42
remember it was the 00:36:49
and it is authentic and it is worth it and it is authentic and we put it was a state variable 00:36:53
that we had here and we put it true or false when we were logged or 00:36:59
when we registered, it is worth here logged and here we registered that it was a state variable 00:37:06
and it told us that this is going to give us a problem but I want you to see why we use the cookies 00:37:16
instead of directly using these state variables, it is worth because it is going to give me a 00:37:23
problem because these variables of the context are worth state variables that I have them 00:37:29
saved in the context of course I initialize them I initialize and also put them in the inside of 00:37:37
the provider what does that mean because every time we reload a page it will put them like this 00:37:47
then the set is auto indicate this is going to always put it to false ok then we are going to 00:37:55
see it and see if you understand the logic and you see the logic is worth that problem that then 00:38:01
obviously we are going to give it a solution is worth then to do this the first thing we are going to 00:38:09
do is create the different pages ok and then a file a jsx in which we are going to call 00:38:15
in the attribute in the element property, it is worth that anonymous function, that arrow function that evaluates 00:38:24
if there is that context, that state variable, the isAuthentic is true or not, if it is true, 00:38:32
then it does allow you to enter these routes, but if not, then it is not worth it if I am not going to take you 00:38:42
all the time, for example, to the window or to the login page, okay, 00:38:48
so that's what we're going to do, we're going to do the pages first and then we're going to 00:38:58
continue with that proposal, okay, so let's go to page we're going to create a page that I can call 00:39:04
home page or main page or home page or whatever you want, okay, then we have this 00:39:15
here we are going to remove it because we don't need it either, we leave it the same and here we are going to put 00:39:29
this is ok then this would be one we are going to create another one that would be for example 00:39:43
we have was the one of the tasks that shows us all the tasks so here we are going to 00:39:57
create another one that you are 6.j s x rfc 00:40:05
here we are going to put 00:40:13
costs 00:40:19
ok tax ok let's create another one that will be 00:40:24
what else did we have the one of the profile the profile 00:40:33
.jsx 00:40:42
ok and here 00:40:48
ok it can also be valid for us, that is, we 00:40:57
puede faltar la de añadir las nuevas tareas vale entonces a ese le podemos llamar estás 00:41:03
ese le vamos a poner a traer un formulario 00:41:14
y aquí los dos vale lo dejo así no le voy a hacer nada más porque ahora mismo lo único que quiero es 00:41:29
estas páginas para desde app js x ir modificando todo vale entonces vale ya tengo hechas mis páginas 00:41:41
vamos a poner en app js x así que esto 00:41:50
vale en vez de poner estos h 1 y tal y cual lo que vamos a pasar es esas distintas páginas vale 00:41:57
entonces para hacer esto aquí en la de task lo que le voy a pasar es 00:42:08
estás page vale estás page 00:42:18
que no me lo ha cogido así que vamos a ponerle aquí el importe 00:42:32
space 00:42:40
no ok here which one are we going to pass 00:42:43
this one comes out then here we are going to pass it as we have called it task form page 00:43:04
you are 00:43:13
ready and this here 00:43:17
and this is worth updating because the same as up here so I'm going to copy it and I'm going to paste in profile 00:43:21
for the profile 00:44:04
profile page ok 00:44:47
we would already have here we have passed the elements that we want 00:44:52
que nos cargue vale y aquí el home esto sería 00:44:57
este nos faltaría y aquí sería el home 00:45:06
pues ya está ya tendremos ya tendríamos este contenedor que road que ahora mismo 00:45:14
no está haciendo nada vale las rutas que están dentro que son las que queremos 00:45:44
protect and now we would have to put some element here then to do this 00:45:49
we are going to create a file directly in that rc it is worth directly here you could already 00:45:56
know that the grade where you see that we can call it 00:46:02
well, for example, protected routes dot j s x 00:46:06
protected routes dot j s x rfc 00:46:17
and now directly to leave it all done we are going to say good because it matters 00:46:24
to see how we have put it, it does not matter 00:46:29
in protected routes, it already shows it to me here and then here we are going to pass it to the element 00:46:39
well, protected routes, let's see the invention, I close it here, it is treating it as a string 00:46:49
because I am doing it as if it were a string, 00:47:13
okay, that's how it would be, okay, well, now we have already told him what we want him to validate us, 00:47:20
that in this case it is going to be protected routes that I have here, it is worth right now it is nothing that 00:47:29
validates us before giving access to these routes to the path to the one I say to the path to the task to the 00:47:37
of details to the tax is the idea of ​​the profile, okay, well, let's go to it, then here we are going to 00:47:45
import from the real one on the one hand, the dom router, okay, we are going to export 00:47:59
export not to import the navigate is worth because we are going to need to go if I do not know if we are not 00:48:10
able to find in the context that is authentic and that we want to control, it is worth that it 00:48:25
directly takes us to that start page where it is here on the one hand the navigate and on the other hand 00:48:32
el outlet el outlet lo que te dices bueno si si se cumple entonces deja entrar a esas rutas 00:48:40
protegidas vale entonces esto es un poco como algunas funciones que hemos visto ya como las de 00:48:52
las funciones promesa o vale que son capaces de controlar dos posibles estados o es verdadero o 00:48:59
or it is false ok then here what we are going to tell you is 00:49:08
we are going to work with the context variable as we are going to work with the context variable 00:49:17
we are going to import it and for this was the juice juice out juice out there you are ok from our context 00:49:22
In the useOut, if we remember this, we had, I'm going to delete this, I don't want it now for nothing, we have those variables from the context that we could use, 00:49:37
because they can be the user if we want to work with all the information that we have from the user 00:50:07
and he is 00:50:15
what 00:50:21
and paste it here 00:50:30
this is going to be the same as use out, okay, in such a way that I can already work or use these 00:50:32
context variables of the state of the context, it is worth for my purposes, it is worth 00:50:51
well, what am I going to say, is this variable true or false, it is worth 00:50:59
and we are going to put it if it is not true, what do we have to do, well, it will take us to 00:51:09
navigate to the login, for example, it is worth if it is not true then it takes us to login ok but what happens 00:51:20
if it was true here I am to close it well here the reply is passed so that no 00:51:38
garbage and in memory or anything remember that we are with the web ok then here it says yes no take me 00:51:54
to login ok and do not stay with any type of information from the page in which you were trying to 00:52:01
enter ok remember that there we have written a link a route then with the replacement is that the 00:52:08
because it replaces it and that's okay, it's a bit of a way of being more sharp, okay, 00:52:14
okay, and there we would have it, what happens if it is not false, I tell you if it is not false, then you 00:52:24
and here is where we pass the outlet 00:52:35
ok then this would be this would be our function if the user thing because I don't need it 00:52:52
at all I'm not doing anything with that ok if we needed it it was just so that you could see 00:53:02
how we use those variables of the context 00:53:08
well and this would be that function protected routes that we are calling from ppjs and we are 00:53:14
saying before entering any of these routes you have to check you have to go through these 00:53:19
protected routes just like the meters or the logic is exactly the same all 00:53:25
time is worth then here I have put a middle word I have put that arrow function that 00:53:32
anonymous function so that the test before giving permission to enter any of these pages of 00:53:39
these routes with the outlet I let it enter but if it is not valid the condition that we have 00:53:46
put it in protected routes then not then you are going to send me directly to login it is 00:53:57
logic is as easy as that but nevertheless this does not work for what I tell you because 00:54:04
when trying to reload the page that is authentic and that is going to always put it to false it is going to 00:54:10
always put it to false then this I have only put it I show it to you now so that you can see a 00:54:20
bit that you could complicate it a bit it could work and it would be 00:54:25
an option ok and you have it there and well I found it interesting that you saw the 00:54:32
why it does not work and how to implement this is worth this 00:54:37
video that is getting a little long I'm going to leave it here and with the next one 00:54:44
that I'm going to do now because we already give solution to this we are going to see how it 00:54:48
works then let's go to our page here ok then ok we are on the 00:54:53
page we are fine 00:55:01
we have logged we have in our database of mongo to 00:55:05
the user mario ok well here we are going to put 00:55:11
mario puntos santos arroba educa punto madrid punto rg 00:55:16
1 2 3 4 5 and 6 ok then if I give it to 00:55:24
log in, you see, I don't miss any error if I come here 00:55:29
and this is what I want to see is this provider 00:55:36
here it is not taking me to the case is that it does tell me what about the 00:55:47
truck and the cookie 00:55:58
the cookie if it is not putting it well, but the state if it is not putting it 00:56:07
true because it finds this state the truth is that it could not have worked for us but it does not 00:56:13
work for us so I tell you that in the variable of states it does tell us but when trying to 00:56:25
navigate it is not worth it then well now in the next part of the video well here you do not see it 00:56:30
expensive because here in the code we are going to see in the code 00:56:49
now you are seeing the code ok at the time 00:56:59
in which I tell him if it is false you take me to login but if you don't give him the 00:57:05
outlet ok I go back to the page on the page I have the answer because I follow 00:57:10
this page but if I try to go to the task for example of course what happens that context goes away 00:57:17
you see the state is no longer false so that's why it loads me again login actually 00:57:24
has done what we have told him it has come has asked if it is authentic it has seen that it is 00:57:32
false and then it takes us to login ok because every time I reload a route to a page of each of 00:57:39
those routes resets all that context that is why it is not useful to us and that is why 00:57:46
we have to use the cookies yes or yes it is worth if it would not make sense to have done from the back in that 00:57:52
is good well so far it is worth and in the next video we continue a greeting guys see you later 00:58:00
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
13
Fecha:
16 de agosto de 2024 - 14:37
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 18″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
170.30 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid