I am using AuthGuard to protect components until a user is logged in. The AuthGuards works, but whenever changes in the components are made and saved, the page refreshes itself and becomes blank and there are no errors in the console.
I have looked at similar issues found on Stack Overflow, but the problems are different and have not found the solution, yet.
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HomeComponent } from './home/home.component';
import { AuthguardService } from './authguard.service';
import { MembersComponent } from './members/members.component';
import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
import { TicketsComponent } from './tickets/tickets.component';
export const routes: Routes = [
{ path: '', component: LoginComponent },
{
path: 'app-home', component: HomeComponent,
canActivate: [AuthguardService],
children: [
{ path: 'login', component: LoginComponent },
{ path: 'navigation', component: NavigationComponent },
{ path: 'member', component: MembersComponent },
{ path: 'subscription', component: SubscriptionsComponent },
{ path: 'ticket', component: TicketsComponent },
]
},
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [LoginComponent]
authguard.service.ts:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { LoginService } from './login.service';
@Injectable({
providedIn: 'root'
})
export class AuthguardService implements CanActivate {
constructor(private loginService: LoginService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
const token = this.loginService.getToken();
if (!token) {
this.router.navigate(['/']);
return false;
}
return true;
}
}
I expect the new changes to be visible right away, whenever new changes are made, instead of having to go all the way back to the login page, login again and then go back to the component to see the new changes.
