angular - 刷新 Angular 6 项目页面时出现 403 错误

Question

我有一个具有 JWT 授权的 Angular 6 项目，部署在 AWS Elastic Beanstalk 中并使用 CloudFront，我使用 @auth0/angular-jwt 库进行管理。一切正常，我有一个指向我的页面的链接，该链接将授权 token 附加到请求中:

https://myapp.com/?authorization=my_token

这是由我的 AuthGuard 服务处理的:

...
canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  const token = next.queryParams[AUTHORIZATION_PARAMETER];
  if (token) {
    this.authService.login(token);
  }

  if (!this.authService.isLoggedIn()) {
    this.router.navigate(['login']);
    return false;
  }

  return true;
}
...

在我的应用程序路由中:

export const AppRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

在我的 AuthService 中:

...
private jwtHelper: JwtHelperService;
private userAuthenticated: BehaviorSubject<boolean> = new BehaviorSubject(false);

constructor(
  private authStore: AuthStore
) {
  this.jwtHelper = new JwtHelperService();
}

login(token: string) {
  this.authStore.setToken(token);
  this.updateState();
}

logout() {
  this.authStore.clearToken();
  this.updateState();
}

isLoggedIn(): boolean {
  this.updateState();
  return this.userAuthenticated.getValue();
}

updateState() {
  this.userAuthenticated.next(this.isTokenValid());
}

isTokenValid(): boolean {
  const token = this.getAsyncToken();
  return !this.jwtHelper.isTokenExpired(token);
}

getAsyncToken() {
  return this.authStore.getToken();
}
...

在我的 AuthStore 中:

...
setToken(token: string) {
  localStorage.setItem(JWT_TOKEN_STORAGE_KEY, token);
}

getToken() {
  return localStorage.getItem(JWT_TOKEN_STORAGE_KEY);
}

clearToken() {
  localStorage.removeItem(JWT_TOKEN_STORAGE_KEY);
}
...

因此，当我单击链接时，应用程序会正确加载仪表板组件，并更改 URL，如下所示:

https://myapp.com/dashboard

到达此处后，如果我按 F5 键刷新页面，则会收到此错误:

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>the_request_id</RequestId>
  <HostId>the_host_id</HostId>
</Error>

提前致谢。

更新: 这是与CloudFront相关的问题，资源“仪表板”不存在，因此它返回拒绝访问，如何在 Angular 中防止/管理此类事件(F5键)？

Answer 1

这个问题可以通过在服务器端处理 url 重写来解决。

查看下面的文档 https://angular.io/guide/deployment 页上的开发服务器

您可以通过以下链接获得帮助

https://codeburst.io/deploy-angular-2-node-js-website-using-aws-1ac169d6bbf

https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/