刷新后角度路由失败（角度路由与服务器路由同名）

Question

我在使用 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 来说就存在问题。 首先单击 /map 按钮加载组件，然后向服务器 api 发送 get 请求以获取一些数据，并发送令牌进行身份验证，不用担心。

当我刷新时（或手动输入 localhost:3000/map），角度应用程序不会获取路由，而是会绕过角度路由将空 GET 请求发送到服务器。 所以是的 /map 是一个角度路线，但也可以作为服务器上的获取请求。当我将服务器端路由名称更改为其他名称时，不会发生此行为，因此它确实与名称相同有关。我认为名称相似性应该不是问题，因为 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;
     }
  }

}

Answer 1

所以，据我所知，您应该使用 HttpClient API 来调用服务器端 https://angular.io/guide/http，这是与服务器端通信的推荐方式。

一般来说，前端客户端和后端应该分开，除非您尝试创建一个在客户端和服务器端都提供内容的同构应用程序，这会增加复杂性。

Answer 2

这是为您的应用提供服务时的后端问题（我猜）。你有两个选择：

1. 将后端配置为始终在index.html 上重定向，因此无论后端有什么 URL，都将始终重定向到基本应用程序 URL，而前端实际上会相应地读取路由。
2. 使用 Angular 中的 Hash 定位机制，可以达到这个目的，但您必须更新应用中的所有路线（不推荐）。

查看官方文档链接：

• https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml
• https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles

编辑：更深入和详细地阅读您的帖子，这似乎有点奇怪，我不知道我的回答是否能解决您的问题。我暂时就这样吧……也许会有所帮助。如果没有，我会删除这个答案。