0

estoy tratando de capturar la url de cada modulo que ingresa y el usuario de la persona con angular y mandarle al back en este caso es java. Para realizar unas metricas y ver que usuarios están ingresando seguidamente y que modulo son lo mas vistos.

He creado un interceptor.service.ts

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpEvent, HttpRequest, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> {

      const headers = new HttpHeaders({
      'token-usuario':'assasaas'
      });
      const reqClone = req.clone({headers})
      console.log(reqClone);
    return next.handle(req).pipe(
      catchError(this.manejarError)
    )
  }
  manejarError(error: HttpErrorResponse){
    console.log('Sucedio un error');
    console.log('Registrando en el log File');
    console.warn(error);
    return throwError('Error Personalizado');
}

}

User.Service

 obtenerUsuario(){
       
        return this.http.get('https://reqres.in/api/user'/*,{params}*/).pipe(
            map(resp => resp['data'])
        );
    }

app.component.ts

this.UserService.obtenerUsuario().subscribe( resp =>{console.log(resp);})

Problema Problema es que me devuelve encriptado

introducir la descripción de la imagen aquí

APP.COMPONENT.TS : Agregue registro.registrar(this.constructor.name);

import { Component, Renderer2, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { RoutePartsService } from './core/services/router-parts.service';
import { LayoutService } from './system/frame/services/layout.service';
import { filter } from 'rxjs/operators';
import { RegistrarVisitaService } from './services/registrar-visita.service';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  appTitle = 'MIS';
  pageTitle = '';

  constructor(
    public title: Title,
    private router: Router,
    private activeRoute: ActivatedRoute,
    private routePartsService: RoutePartsService,
    private layout: LayoutService,
    private renderer: Renderer2,
    private registro: RegistrarVisitaService
  ) {
   registro.registrar(this.constructor.name);
   // registro.registrar('Modulo/NombreDelComponente');
   }

Cree un servicio llamado: RegistrarVisitaService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserService } from '../core/services/user.service';

@Injectable({
  providedIn: 'root'
})
export class RegistrarVisitaService {

  constructor(private http: HttpClient, private userService: UserService) { }

  registrar(componente : string){
    console.log(componente);
    this.http.post('url para enviar los datos',
    {
        componente : componente,
        usuario: this.obtenerUsuario()

    }).subscribe(r => {

    });

  }
  private obtenerUsuario(){

    // obtener el usuario logueado
  console.log(this.userService.getEmail())
    return this.userService.getEmail();//'usuarioFalso';
 
   }
}

introducir la descripción de la imagen aquí

7
  • Y el problema ?
    – Lobos
    Commented el 7 oct. 2020 a las 21:37
  • @Lobos cierto me olvide del problema, ahora le coloco
    – PieroDev
    Commented el 7 oct. 2020 a las 21:40
  • 1
    Entiendo que se hace una petición a una API en localhost:8080 y esa url es la que aparece encriptada. Agrega el código donde se hace esa petición junto con la url.
    – Lobos
    Commented el 7 oct. 2020 a las 22:40
  • 1
    Entonces quieres que la app de Angular envíe a un backend la información de cuál módulo está siendo visitado por un usuario? Por ejemplo el usuario entra al módulo de ventas, entonces la app envía al backend la url */ventas y el usuario juan? Y conforme el usuario navega dentro de la app así se registran los módulos que está visitando.
    – Lobos
    Commented el 7 oct. 2020 a las 23:01
  • 1
    Continuemos el debate en el chat.
    – Lobos
    Commented el 7 oct. 2020 a las 23:03

1 respuesta 1

1

Crear un servicio que se conecte al router de Angular para obtener información de los eventos de navegación:

import { Injectable } from '@angular/core';
import {NavigationStart,Router } from '@angular/router';

@Injectable()
export class RegistrarService {

  // insertar una instancia del router en el servicio
  constructor(private router: Router) { 

    // suscribirse a los eventos de navegación
    // así se obtendrá información cada vez que se navegue en la aplicación
    router.events.subscribe(e => {
      // obtener la url navegada con la propiedad url del router
      
      // los eventos de navegación son varios así que se filtra solo uno
      if(e instanceof NavigationStart){
         this.registrar(this.router.url);
      }
     
    });
  }

  private registrar(url : string){
   
    console.log(url);

  }

  private getUsuarioLogueado(){

    return 'usuario 1';

  }

}

En el app.component agregar una instancia del servicio en el constructor:

export class AppComponent  {
  

  constructor(private registrar: RegistrarService){
    
  }
}

Con ese par de cambios la aplicación puede capturar cada url en la que se está navegando.

9
  • una consulta como puedo obtener el nombre dl modulo dinamico : registro.registrar('Modulo/NombreDelComponente');
    – PieroDev
    Commented el 8 oct. 2020 a las 16:47
  • Con this.constructor.name puedes obtener el nombre del componente.
    – Lobos
    Commented el 8 oct. 2020 a las 16:54
  • agregue this.constructor.name en el app.component.ts y cuando navego y cambio de modulo sigue apareciendo el app.component.ts , edite mi pregunta al final y es lo que he realizado, veo que no cambia el nombre del modulo
    – PieroDev
    Commented el 8 oct. 2020 a las 16:58
  • 1
    Sí. Debes hacer lo mismo en todos los componentes para que registre el ingreso.
    – Lobos
    Commented el 8 oct. 2020 a las 17:02
  • 1
    Buen dato. Haré una solución un poco más elaborada usando el modulo de routing.
    – Lobos
    Commented el 8 oct. 2020 a las 17:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.