NgxDeeplink

Esta biblioteca visa manipular o uso de deeplinks para aplicações Angular v13+. Seja em rotas autenticadas ou não, pode levar o seu público alvo em qualquer parte do seu website ou sistema com a tecnologia mencionada acima.

Requisito único

Angular v13+

Instalação

1° Passo

Execute npm i npx-deeplink para a instalação da biblioteca.

2° Passo

Crie uma variável que armazene todos os seus deeplinks, de onde vem e para onde deve ir. Servindo como um "short link", para manter a segurança em casos de rotas com informações sensíveis, etc. Exemplo:

import { NgxDeeplinkModule, ngxDeepLinkRoute } from 'ngx-deeplink';
const deepLinks: Array<ngxDeepLinkRoute> = [
  {
    from: '123', // Identificador único do deeplink
    to: '/algo' // Rota já existente na sua aplicação
  },
];

3° Passo

Decida que "namespace" você deseja para interceptar o deeplink, caso não preencha isso, por padrão usará dl.

seusite.com.br/dl/SEU_DEEPLINK <- sem preencher o namespace seusite.com.br/exemplo/SEU_DEEPLINK <- preenchendo o namespace com exemplo

4° Passo

Inclua a biblioteca no seu ngModule com as configurações criadas:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxDeeplinkModule.forRoot({
      routes: deepLinks, // criado no 2° passo
      namespace: 'SEU_NAMESPACE' // mencionado no 3° passo
    }),
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent],
})
export class AppModule {}

Uso utilizando rotas autenticadas com validação via canActive

O caso mencionado abaixo trata de casos em que o usuário precisa realizar login antes de continuar até o destino

utilizando um deeplink seusite.com.br/exemplo/123, teoricamente ele enviaria para a url seusite.com.br/algo como configurado acima. No entendo, no arquivo app-routing.module.ts as rotas foram configuradas da seguinte maneira:

 const routes: Routes = [
  {
    path: '',
    loadChildren: () =>
      import('./pages/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then((m) => m.LoginModule)
  },
  {
    path: 'algo',
    loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
    canActivate: [AuthGuard] // Este AuthGuard Irá verificar se o usuário está autenticado
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

No arquivo auth-guard.service.ts :

import { Injectable } from "@angular/core";
import { CanActivate, Router } from "@angular/router";
import { NgxDeeplinkService } from "ngx-deeplink"; // Importando o Service

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    public router: Router,
    private ngxDeeplinkService: NgxDeeplinkService
  ) {}

  canActivate(): boolean {
    if (localStorage.getItem('user_id')) {
      return true;
    }
    // Chegando aqui, o usuário não está autenticado, precisamos garantir que ele continue depois de realizar o login.
    const fragment = this.ngxDeeplinkService.checkRoute(this.router); // Aqui ele verifica se a Rota está configurada como deeplink, se sim, ele gera um hash.
    if (fragment) {
      this.router.navigate(['/login'], {
        fragment: fragment // caso ele gere um hash, ele deve ser enviado como fragment na rota que será redirecionada, no caso, a tela de login
      });
    }
    return false;
  }
}

Já no arquivo login.component.ts :

 
  // AO criar um método para autenticar o usuário deve-se tomar duas ações
  public login() {
    if (this.ngxDeeplinkService.verifyDeepLink()) { // Verificar desta forma se deve seguir para um deeplink
      
      console.log('VALIDANDO LOGIN COMO VOCÊ FAZ NO SEU SISTEMA');


      this.ngxDeeplinkService.goToDeepLink(); // Depois de autenticar, retorna para o deeplink, e fim.
    } else {
      console.log('NÃO EXISTE DEEPLINK, SEGUIR NORMALMENTE');
    }
  }

Licença

MIT