Я использую AuthGuard для защиты компонентов до тех пор, пока пользователь не вошел в систему. AuthGuards работает, но всякий раз, когда изменения и изменения в компонентах производятся и сохраняются, страница обновляется и становится пустой, и в консоли нет ошибок.
Я смотрел на похожие проблемы, обнаруженные при переполнении стека, но проблемы другие и пока не нашли решения.
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;
}
}
Я ожидаю, что новые изменения будут видны сразу же, когда будут внесены новые изменения, вместо того, чтобы go возвращаться обратно на страницу входа, войдите снова и затем go вернитесь к компоненту, чтобы увидеть новые изменения.