En mi aplicación angular, estoy enviando una solicitud a mi backend para verificar las credenciales, después del éxito, el backend envía un token que leo. Hasta ahora esto funciona, pero tuve que usar una canalización para hacer que se asignara a un método y luego hacer que funcionara. Pero mi problema ahora es que, aunque estoy recibiendo 200 del servidor, mi página no navegará a la página protegida automáticamente. Si ingreso la url manualmente, funciona, esto es lo que probé:
authenticateUser(login: LoginModel){ this.http = new HttpClient(this.handler) return this.http.post<JwtToken>(environment.rootUrl + 'api/authenticate', { username: login.username, password: login.password, }).pipe(map(response => this.authenticateSuccess(response))) .subscribe({ next: () => { this.isAuthenticated = true; this.router.navigate(['/dashboard']) }, error: (error) => { this.isAuthenticated = false; console.log(error) } }) }No entra en la parte de suscripción después de la canalización. ¿Hay alguna manera de hacer funcionar esto? Todavía quiero tener un manejo de errores como si no hubiera error, luego navegue a la URL si el error no navega.
EDITAR:
Método AuthenticateSuccess:
isUserLoggedIn(){ return !! localStorage.getItem('authenticationToken') } private authenticateSuccess(response: JwtToken): void { const jwt = response.id_token; localStorage.setItem('authenticationToken' , jwt) this.localStorageService.store('authenticationToken', jwt); console.log(this.localStorageService.retrieve('authenticationToken')) this.sessionStorageService.clear('authenticationToken'); }Authguard:
@Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor( private auth: AuthenticationService, private router: Router ) { } canActivate(): Promise<boolean> { return new Promise(resolve => { if (this.auth.isUserLoggedIn()) { resolve(true) } else { this.router.navigate(['authenticate']) resolve(false) } }) } }SOLUCIÓN:
authenticateUser(login: LoginModel) { this.http = new HttpClient(this.handler) return this.http.post<JwtToken>(environment.rootUrl + 'api/authenticate', { username: login.username, password: login.password, }).subscribe({ next: response => { this.isAuthenticated = true; this.authenticateSuccess(response) this.router.navigate(['/dashboard']) }, error: (err) => { console.log(err) }, complete: () => { console.log("finished without worry") } }) }Se supone que el operador de map RxJs modifica el contenido de un observable. Sin embargo, el operador del map necesita devolver el mismo observable u otro observable, para que la próxima operación de subscribe pueda funcionar.
En su caso, su operador de map no devuelve ningún observable y, por lo tanto, el método de subscribe no tiene motivos para activarse.
Puede simplemente devolver la response nuevamente en su método aquí
private authenticateSuccess(response: JwtToken): any { const jwt = response.id_token; localStorage.setItem('authenticationToken' , jwt) this.localStorageService.store('authenticationToken', jwt); console.log(this.localStorageService.retrieve('authenticationToken')) this.sessionStorageService.clear('authenticationToken'); return response; } pero creo que todo el código del método del map coincide mejor directamente dentro del método de subscribe .