Tengo mi archivo apiauth.service.ts de la siguiente manera:
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { BehaviorSubject, map, Observable } from "rxjs";
import { Usuario } from "../models/usuario";
import { Response } from "../models/response";
import { Login } from "../models/login";
import { Router } from "@angular/router";
const httpOption = {
headers :new HttpHeaders({
'Content-Type' : 'application/json'
})
}
@Injectable({
providedIn:'root'
})
export class ApiAuthService{
url: string = 'https://localhost:44355/User/Login' ;
private usuarioSubject!: BehaviorSubject<Usuario>;
public usuario: Observable<Usuario>;
public get usuarioData():Usuario{
return this.usuarioSubject.value;
}
constructor(private router:Router,private http : HttpClient){
this.usuarioSubject = new BehaviorSubject<Usuario>(JSON.parse(localStorage.getItem('usuario')!));
this.usuario = this.usuarioSubject.asObservable();
}
login(login : Login):Observable<Response>{
return this.http.post<Response>(this.url, login,httpOption).pipe(map(res=>{
if(res.exito == 1){
const usuario:Usuario = res.data;
localStorage.setItem('usuario',JSON.stringify(usuario));
this.usuarioSubject.next(usuario);
}
return res;
}));
}
logout(){
localStorage.removeItem('usuario');
this.router.navigate(['login']);
}
}
Pero si doy click en el boton cerrar sesion, no me redirige al login ni a ninguna pagina. Y los datos se siguen visualizando..Sin embargo si refresco la pagina(con el navegador o F5) si me aparece el login y ya no puedo entrar a ningun controller.. que podra ser?
Edito: app.routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ArticuloComponent } from './articulo/articulo.component';
import { ClienteComponent } from './cliente/cliente.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { VentaComponent } from './venta/venta.component';
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{path: 'home',component:HomeComponent},
{path: 'Clientes',component:ClienteComponent},
{path: 'Venta',component:VentaComponent},
{path: 'login',component:LoginComponent},
{path: 'Articulo',component:ArticuloComponent},
{path: '', component: HomeComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
this.router.navigate(["/login"])