README
React Router Authenticator
Esta biblioteca tem como finalidade auxiliar os desenvolvedores a terem uma melhor forma de trabalhar com rotas privadas e públicas.
Antes de começar
Esta biblioteca trabalha em conjunto com a React Router, utilizando certas funcionalidades que não teriam necessidade de serem reescritas. Sendo assim leiam, com atenção cada seção desse documento.
Instalação
npm install react-router-authenticator
Modo de uso
import { BrowserRouter, Switch } from "react-router-dom";
import { Authenticator, AuthRoute } from 'react-router-authenticator';
export default () => {
return (
<BrowserRouter>
<Switch>
<Authenticator onValidator={() => true} validRedirect="/dashboard" invalidRedirect="/login">
<AuthRoute exact path="/" component={Home} restricted />
<AuthRoute exact path="/login" component={Login} restricted />
<AuthRoute exact path="/dashboard" component={Dashboard} isPrivate />
<AuthRoute exact path="/route-one" component={Component1} isPrivate />
<AuthRoute exact path="/route-two" component={Component2} isPrivate />
<AuthRoute exact path="/route-three" component={Component3} isPrivate />
<AuthRoute exact path="/route-four" component={Component4} isPrivate />
<AuthRoute exact path="/route-five" component={Component5} isPrivate />
<AuthRoute exact path="/route-six" component={Component6} isPrivate />
<AuthRoute exact path="/route-seven">
<Component7 />
</AuthRoute>
<AuthRoute exact path="/route-eight" isPrivate>
<Component8 />
</AuthRoute>
<AuthRoute exact path="/route-nine" isPrivate>
<Component9 />
</AuthRoute>
</Authenticator>
</Switch>
</BrowserRouter>
);
};
Componentes
(Obrigátorio) Authenticator
Este componente é responsável pelo contexto funcional da biblioteca, ele possui apenas 3 (três) propriedades básicas para o seu bom uso. Sendo elas onValidator
, validRedirect
e invalidRedirect
, exemplo:
<Authenticator onValidator={() => true} validRedirect="/dashboard" invalidRedirect="/login">
<AuthRoute exact path="/" component={Home} />
<AuthRoute exact path="/login" component={Login} restricted />
<AuthRoute exact path="/dashboard" component={Dashboard} isPrivate />
</Authenticator>
Propriedades
Propriedade | Tipo | Descrição | Padrão |
---|---|---|---|
onValidator | Function | Callback responsável pela validação das rotas privadas, para que uma rota privada seja acessada, é necessário que o callback retorne true |
Falso |
validRedirect | String | Rota usada para redirecionar caso tente acessar uma rota com a propriedade restricted e que não seja privada, caso o callback de onValidator retorne true |
Vázio |
invalidRedirect | String | Rota usada para redirecionar caso tente acessar uma rota privada, caso o callback de onValidator retorne false |
Vázio |
(Obrigátorio) AuthRoute
Este componente espelha todas as propriedades do componente Route
da biblioteca React Router, porém, algumas novas funcionalidades são adicionadas a ele. Sendo elas isPrivate
e restricted
, exemplo:
<AuthRoute exact path="/" component={Home} />
<AuthRoute exact path="/login" component={Login} restricted />
<AuthRoute exact path="/dashboard" component={Dashboard} isPrivate />
Propriedades
Propriedade | Tipo | Descrição | Padrão |
---|---|---|---|
isPrivate | Boolean | Valor booleano que determina se é uma rota privada | Falso |
restricted | Boolean | Valor booleano que determina se uma rota pública se torna restrita após o uso de um callback definido na propriedade onValidator do componente Authenticator |
Falso |
as | Element | Este atributo é exclusivo para trabalhar em conjunto com o componente MapRoute da biblioteca React Router Mapping |
Vázio |