I'm currently in the process of developing a web application that includes features like user login, a dashboard, and straightforward routing;
There are two options for logging in and routes in my app:
Login methods:
Using email:
login(u) { this._loginService.login(u) .subscribe(data => { console.log('Successfully logged in with email!'); this._router.navigate(['/dashboard']); });Through Google:
googleLogin() { gapi.auth2.authorize({ client_id: * scope: 'email', response_type: 'code', prompt: 'select_account' }, (response) => { if (response.error) { return; } this._loginService.loginWithGoogle(response) .subscribe(response1 => { console.log('Successfully logged in with Google!'); console.log(response); this._router.navigate(['/dashboard']); }); });Router configurations:
const appRoutes: Routes = [ { path: 'dashboard', component: MainComponent}, { path: 'login', component: LoginComponent }
After successfully logging in via email, the router navigates without any issues.
The problem arises when logging in using Google sign-in and attempting to navigate to /dashboard, causing the app to crash in the following ways:
- Pressing a button to change routes only displays the view and does not remove my dashboard from the DOM.
- Sometimes, the login page remains in the DOM.
- Other functions in my code stop working.
- NO ERRORS IN CONSOLE
Refreshing the page resolves these issues and restores functionality.