diff --git a/docs/src/content/docs/pt/challenges/angular/6-permissions.md b/docs/src/content/docs/pt/challenges/angular/6-permissions.md new file mode 100644 index 0000000..882e6bf --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/6-permissions.md @@ -0,0 +1,59 @@ +--- +title: 🟠 Diretiva Estrutural +description: Desafio 6 é sobre criar uma diretiva estrutural para manipular permissões +author: thomas-laforge +challengeNumber: 6 +command: angular-permissions +blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad +sidebar: + order: 102 +--- + +## Informação + +Diretiva estrutural é um conceito importante que você necessita dominar para melhorar suas habilidades e conhecimentos angular. Isso será a primeira parte deste desafio. + +Guarda é também muito importante uma vez que você sempre precisará em cada aplicação que construir. + +## Declaração + +Em LoginComponent, você encontrará 6 botões correspondentes para 6 diferentes funções de usuário. + +:::note[Nota] +Deixaram-se os nomes das funções em inglês. +::: + +- Admin (Administrador) +- Manager (Gerente) +- Reader (Leitor) +- Writer (Escritor) +- Reader and Writer (Leitor e Escritor) +- Client (Cliente) +- Everyone (Todos) + +## Passo 1 + +Em `InformationComponent`, precisa mostrar a informação correta para cada função usando uma diretiva estrutural. + +### Restrições + +- sem `ngIf` ou `@if` dentro de `InformationComponent` +- importart a store dentro de `InformationComponent` não é permitido. + +Você deve terminar com algo semelhante com o código abaixo: + +```html +
Info for Role1
+``` + +```html +
Info for Role1 and Role2
+``` + +```html +
Info Only for superadmin
+``` + +## Passo 2 + +Em `Routes.ts`, você deve rotear todos os usuários para o `DashboardComponent` correto usando a guarda `CanMatch`.