AllowedRoles

Projeto em Angular 7 modularizado, responsável por aplicar a checagem de autorização de acesso do usuário as funcionalidades de um sistema, utilizando as regras (FUNCIONALIDADES, PERMISSOES, GRUPOS, etc) do sistema ACESSO. Por ser modularizado, se torna simples e facíl utiliza-lo em outros projetos, fazendo uso da ferramenta 'npm' para importa-lo, mais detalhes abaixo.

Como utiliza-lo em sua aplicação

1 - No terminal entre na raiz do seu projeto angular, execute o comando 'npm i allowed-roles' para instalar o modulo.

2 - Execute o comando 'npm install ngx-cookie-service --save' para instalar a biblioteca de dependência ngx-cookie-service.

3 - No arquivo 'app.module.ts' importe o modulo 'AllowedModule', ex:

outros imports...
import { AllowedModule } from 'allowed-roles';

@NgModule({
  ...
  imports: [
    BrowserModule,
    FormsModule,
    AllowedModule
  ],
  ...
})
export class AppModule { }

4 - Faça a injeção do service 'AllowedRolesService' em seu component angular (de preferência o component de 'boas vindas' da aplicação), e informe os campos 'urlPermissoes' e 'sistema', ex:

outros imports...
import { AllowedRolesService } from 'allowed-roles';

@Component({
  selector: 'boas-vindas',
  templateUrl: './boas-vindas.component.html',
  styleUrls: ['./boas-vindas.component.css']
})
export class BoasVindasComponent implements OnInit {

  atributos da classe...

  constructor(private allowedRolesService:AllowedRolesService, outras injecoes...) {
    allowedRolesService.urlPermissoes = "https://microservices-dev.redetendencia.com.br/api_rest/ms-acesso/login/informacao_usuario_com_permissoes/";
    allowedRolesService.sistema = "MARKETPLACE";
  }
}

5 - Para aplicar as regras no elemento html, utilize a diretiva 'appAllowedRoles' passando as roles que permitem acesso ao elemento, ex:

<button appAllowedRoles='["MP_PRODUTO_GRAVAR","MP_PRODUTO_EXCLUIR"]' type="button" (click)="addProduct()">Gravar</button>

Manutenção, build e publicação no portal npm

Código fonte

Para realizar manutenção no código-fonte, as classes de service e directive são:AllowedRolesService(arquivo: allowed-roles.service.ts)AllowedRolesDirective(arquivo: allowed-roles.directive.ts).

Build e publicação no portal npm

Dados da conta da IntegraTI no portal npm:

Usuario: integratiSenha: !ntegr@t!Email: [email protected]

Build e publicação

1 - No terminal, entre na pasta raiz da aplicação allowedRoles. 2 - Digite 'npm login' e passe os dados da conta solicitados. 3 - Com o comando 'npm install ng-packagr --save-dev' instale a biblioteca ng-packagr, ele irá compilar a nossa biblioteca criada em TypeScript para o formato de um pacote do Angular. 4 - Execute o comando 'npm run packagr', ele fará um dist da nossa biblioteca. A execução desse comando irá criar a pasta dist. 5 - Execute o comando 'npm pack .' para gerar um arquivo .tgz com a versão do nosso projeto. 6 - Por fim, execute o comando 'npm publish dist' para que possamos publicar a nossa biblioteca no portal npm.

Acessando o portal npm via navegador web

Se caso necessário, ou por mera curiosidade você quiser acessar o portal npm, navegue para https://www.npmjs.com/ Faça login utilizando o usuário e senha já informados acima. No menu de usuário logado, acesse a opção 'Packages' para visualizar os pacotes da conta IntegraTI. Fonte/tutorial: https://medium.com/angularbr/publicando-modulo-angular-4-no-npm-392ba0f4a7f9