{"id":201,"date":"2022-12-12T13:32:23","date_gmt":"2022-12-12T16:32:23","guid":{"rendered":"https:\/\/www.criptografarphp.com.br\/site\/como-proteger-rotas-com-react-router-dom-fullstack-bootcamp-javascript\/"},"modified":"2023-04-10T13:56:22","modified_gmt":"2023-04-10T16:56:22","slug":"como-proteger-rotas-com-react-router-dom-fullstack-bootcamp-javascript","status":"publish","type":"post","link":"https:\/\/www.criptografarphp.com.br\/site\/como-proteger-rotas-com-react-router-dom-fullstack-bootcamp-javascript\/","title":{"rendered":"Porqu\u00ea proteger rotas com React Router DOM &#8211; FullStack Bootcamp JavaScript"},"content":{"rendered":"\n<p>Evite que um usu\u00e1rio acesse uma rota em seu aplicativo se ele n\u00e3o tiver as permiss\u00f5es necess\u00e1rias! Com o React Router DOM voc\u00ea ver\u00e1&#8230;<br \/>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/9CYuUNPbP34\" width=\"580\" height=\"385\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n00:02:11<br \/>\nEvite que um usu\u00e1rio acesse uma rota em seu aplicativo se ele n\u00e3o tiver as permiss\u00f5es necess\u00e1rias! Com o React Router DOM voc\u00ea ver\u00e1&#8230;<\/p>\n<p>\u00e0s vezes queremos que um usu\u00e1rio tenha ou sem acesso a uma rota, dependendo se est\u00e1 logado ou dependendo do seu n\u00edvel de acesso para fazer isso henrry para o roteador dom existem diferentes estrat\u00e9gias, mas neste v\u00eddeo eu vou ensinar como voc\u00ea pode faz\u00ea-lo muito facilmente com o render em si vamos veja que existem diferentes maneiras de fazer isso pode-se estar usando apenas um propriedade das rotas que \u00e9 renderizada e aqui no render voc\u00ea pode indic\u00e1-lo em ao inv\u00e9s de colocar uma crian\u00e7a voc\u00ea pode indique o que voc\u00ea tem que fazer ent\u00e3o aqui vamos passar para voc\u00ea um m\u00e9todo e n\u00f3s vamos dizer o que voc\u00ea tem que executar no caso de ter um usu\u00e1rio Ent\u00e3o o que vamos fazer \u00e9 agora nulo ok por enquanto e depois vamos em frente outra coisa e se n\u00e3o tivermos um usu\u00e1rio ent\u00e3o o que agora guardamos isso e isso deveria ser isso dever\u00edamos devolv\u00ea-lo ok, ent\u00e3o devemos fazer isso fazer um desafio de texto porque eu tenho que diga o que voc\u00ea tem que fazer se temos um usu\u00e1rio em um, se n\u00e3o, ent\u00e3o o login que teria que ser j\u00e1 poderia ser um agora nada aparece o que acontece \u00e9 isso \u00e9 muito feio o usu\u00e1rio que est\u00e1 logado eu tentei ir para fa\u00e7a o login e n\u00e3o vamos mostrar nada \u00e9 um pouco henrry estranho para o roteador, \u00e9 claro voc\u00ea tamb\u00e9m pode fazer redirecionamentos para voc\u00ea pode usar o componente de rede voc\u00ea vai e diz a ele onde voc\u00ea tem que ir redirecionar, ent\u00e3o vamos dizer a voc\u00ea que ir, por exemplo, podemos dizer-lhe onenote vamos colocar isso ok isso o que tamb\u00e9m importamos rial router rom e l\u00e1 ter\u00edamos se tiv\u00e9ssemos um usu\u00e1rio vamos redirecion\u00e1-lo para casa e se n\u00e3o Bem, vamos mostrar-lhe o formul\u00e1rio agora. tente ir para o login voc\u00ea v\u00ea um momento que pode ser resolvido porque no final, foi um momento que n\u00f3s temos isso em um giuseppe que ent\u00e3o enquanto o efeito juz est\u00e1 rodando e tal Bem, ele ainda tem usu\u00e1rios, mas em fim \u00e9 fazer o relacionamento corretamente e n\u00e3o est\u00e1 permitindo ficar nessa p\u00e1gina isso n\u00e3o \u00e9 um formul\u00e1rio de seguran\u00e7a ok, isso \u00e9 apenas acontecendo no cliente e este javascript pode ser alterado pelo usu\u00e1rio manualmente, ent\u00e3o no final o seguran\u00e7a muitas vezes nada acontece um usu\u00e1rio tem acesso, por exemplo, ao entre onde quiser o importante \u00e9 que o app e se n\u00e3o tiver o token como vimos nas aulas anteriores bem, ei, ele n\u00e3o poder\u00e1 enviar ou n\u00e3o poder\u00e1 interagir com o back-end e \u00e9 isso nada acontece que eu acho que \u00e9 o mais importante<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Evite que um usu\u00e1rio acesse uma rota em seu aplicativo se ele n\u00e3o tiver as permiss\u00f5es necess\u00e1rias! Com o React Router DOM voc\u00ea ver\u00e1&#8230;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":202,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,2],"tags":[268,69,266,267,62,65,83,64,63,264,263,265],"acf":[],"_links":{"self":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts\/201"}],"collection":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":2,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts\/201\/revisions\/272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/media\/202"}],"wp:attachment":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}