I have a web application powered by an API using Angular 2. I implemented a global service that extends angular2-sails, which handles responses to API calls. If the response includes 401 PLEASE_LOGIN, it redirects the user to the signup component.
The issue arises when I redirect to the signup component - although the view loads correctly, it does not respond to user actions. There are no errors, and the components' methods are being called and functioning properly when interacted with, but the view remains unresponsive or fails to update.
Here is my current setup: The template of my home component includes a reference to a user-sidebar.component. This sidebar component contains an ngOnInit method that requests information about the authenticated user from the backend. In cases where there is no authenticated user, the service responsible for loading this data redirects the user to /signup.
Code snippet showing the ngOnInit method in user-sidebar.component:
ngOnInit(): void
{
this._authService
.me()
.subscribe(
(resData: Object) => { this.user = resData.data; },
(err: any) => { console.log(err); }
);
}
Definition of the AuthService's .me() method:
me(): any
{
return this._appService.get('/me');
}
Snippet showcasing the get method in app.service:
get(path: string, data: Object): Observable
{
return this._sailsService.get(path, data)
.catch(this.handleError.bind(this));
}
public handleError(err: Response): void
{
// If the server responds with unauthorized access, redirect to login/signup page
if(err.statusCode == 401 && err.error == 'PLEASE_LOGIN')
{
this._router.navigate(['/signup']);
}
return Observable.throw(err);
}
At this point, I am unsure whether this issue is caused by a bug in Angular or within my own code, as my research has not yielded any solutions so far.