在用户登录之前,我正在使用 AuthGuard 保护组件。AuthGuards 可以工作,但是每当对组件进行更改并保存时,页面都会自行刷新并变为空白,并且控制台中没有错误。
我查看了 Stack Overflow 上发现的类似问题,但问题不同,还没有找到解决方案。
应用程序路由.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;
}
}
我希望新更改能够立即可见,每当进行新更改时,不必一直返回登录页面,而是再次登录,然后返回组件查看新更改。