У меня есть специфическая проблема с Angular (версия 5), в которой у меня есть несколько маршрутов, настроенных как angular, например:
{path: 'calendar', canActivate: [AuthGuard], component: ProjectsComponent }
{path: 'map', canActivate: [AuthGuard], component: MapComponent }
Затем в заголовке моей веб-страницы есть кнопки, которые активируют эти маршруты.
<li routerLinkActive="active"><a [routerLink]="['/calendar']">Kalender</a></li>
<li routerLinkActive="active"><a [routerLink]="['/map']">Kaart</a></li>
Все хорошо для / calendar, но для / map есть проблема.
При первом нажатии кнопки / карты загружается компонент, который затем отправляет запрос на получение API сервера для некоторых данных с токеном, отправляемым для аутентификации, не беспокойтесь.
Когда я обновляю (или вручную набираю localhost: 3000 / map), угловое приложение не выбирает маршрут, и вместо этого на сервер отправляется пустой запрос GET в обход угловой маршрутизации.
Так что да / карта является угловым маршрутом, но также доступна как запрос на получение на сервере. Такое поведение не происходит, когда я изменяю имя маршрута на стороне сервера на что-то другое, поэтому оно как-то связано с тем же именем. Я предположил, что сходство имен не должно быть проблемой, так как angular должен сначала поднять эти URL-запросы? Или нет?
пустой запрос на получение:
AuthGuard (просто проверяет, вошел ли пользователь в клиентскую часть, серверная часть защищена аутентификацией при каждом запросе):
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService,
private router: Router) {}
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['auth', 'login']);
return false;
}
}
}