Я использую Angular 6, и у меня проблема с изменением маршрутов.
Если я перемещаюсь по приложению с помощью routerLink или метода navigate (), он работает правильно, потому что загружает только новый модуль (при необходимости).
Но, например, если я нахожусь по этой ссылке: localhost: 8080 / home, я нажимаю на URL, отменяю 'home', пишу 'profile' и нажимаю Enter, он корректно переходит на страницу профиля, но приложение перезагружается (также компонент приложения). Зачем? Я не могу понять.
Это мой маршрут:
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Может, проблема в auth-guard?
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private store: Store<fromApp.AppState>, private route: ActivatedRoute, private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.store.select('auth')
.pipe(take(1),
map((authState: fromAuth.State) => {
if (authState.authenticated) {
return true;
} else {
let sessionStorageToken: string = sessionStorage.getItem('token');
if (sessionStorageToken) {
this.store.dispatch(new AuthActions.Login());
this.store.dispatch(new AuthActions.SetToken(sessionStorageToken));
return true;
} else {
let url = state.url;
this.router.navigate(['/login', { redirectTo: url }]);
return false;
}
}
}));
}
}
Это profile.module.ts:
@NgModule({
declarations: [
ProfileComponent
],
imports: [
CommonModule,
FormsModule
]
})
export class ProfileModule { }