小编Zac*_*len的帖子

当app是在S3中托管的静态内容时,路由到Angular组件

我目前正在开发一个带有Angular4前端的应用程序.我的生产目标是将前端作为AWS S3存储桶的静态内容提供.

一切都在处理一个例外,这实际上是应用程序的主要问题.当用户注册时,会向他们发送一封电子邮件,其中包含验证其电子邮件地址的链接 链接的格式如下:

https://myhostname.com/user/userguid?token=tokenvalue

由于前端作为静态内容提供,因此实际上只存在页面index.html,因此单击此链接会生成404.

现在,经过一些研究,我采取了以下步骤.在S3中,我有以下路由规则.

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>myhostname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>
Run Code Online (Sandbox Code Playgroud)

我还有一个CloudFront规则,将所有404错误重定向到index.html.

现在,当有人导航到myhostname.com/user/userguid?token=tokenvalue时,URL会重新写入myhostname.com/#!/user/userguid?token=tokenvalue,但之后用户将被重定向到myhostname.com/home(又名index.html).

我可以对Angular应用程序进行哪些更改以获取散列/片段的值并实际路由到该组件(而不仅仅是重定向,这会将用户发送回index.html)?

请注意,在开发中通过'npm start'提供前端时,这很好用.谢谢大家.

amazon-s3 angular

22
推荐指数
5
解决办法
8530
查看次数

标签 统计

amazon-s3 ×1

angular ×1