单页应用程序应该如何提供永久链接？

Question

为通过单页面应用程序管理的资源提供可公开访问的URL有哪些约定？我认为这是一个建筑设计问题,但我预计会在AngularJS中开发SPA,以防万一.我是SPA的新手.

用户将通过SPA创建,查看和修改各种类型的资源(例如,基于服务器的对象).通过永久链接URL,公众也可以访问这些相同的资源.我很好用SPA在访问资源的永久链接URL时为访问者显示资源.

我只能想到这两种方法:

1. 放置所有资源,在此http://example.com/resourcetype/resourceID实现RESTful API(改变HTTP方法).
2. 将所有固定链接放在http://example.com/resourcetype/resourceID并命中SPA http://example.com/api/resourcetype/resourceID.

(将永久链接置于其下似乎不合理/api.通过"永久链接",我只是指资源的公共未登录URL.)

我希望通过SPA导航到资源的用户到达可共享的URL,因为想要共享该页面的用户首先想要共享其URL,而不是首先找到指向永久链接页面的链接.这表明采用第一种方法,但第二种方法是用于经由网址,如版本的API更好/api/v1,/api/v2等

避免URL中的哈希是理想的.我知道我可以在AngularJS中使用HTML5模式在支持该模式的浏览器中隐藏它们.这也需要服务器端支持,我已经看到了将深层链接重写为SPA访问URL链接的解决方案.

我想知道人们在做什么,以及人们是否发现自己在实践中限制了SPA的使用.谢谢你的帮助!

Answer 1

这是所有 SPA 的一个众所周知但未充分沟通的弱点。为了在 Vue 应用程序中支持永久链接（和动态 URL），我们使用 Web 服务器 URL 重写。我们创建一个 Apache 重写规则，侦听特定的已知/保留的永久链接或动态 URL 模式，并/index.hml使用引用所需资源的自定义查询字符串参数将请求重写到 SPA 的唯一可行端点（即 ）。

例如：

RewriteEngine On
RewriteRule ^somemodule/(.*?)$ /?somemodule=$1 [R=301,L]

上面的规则监听类似的请求 URLmywebsite.com/somemodule/32并将其重写为mywebsite.com/{index.html}?somemodule=32

我们的 Vue 应用程序使用一个“中间件”组件来检查所有请求，寻找我们保留的查询字符串参数匹配?somemodule=x。当遇到这种情况时，它会在内部将请求路由到正确的组件/模块。

处理 SPA 中的永久链接和动态 URL 是一个严重的麻烦。希望上述方法能够提供一些额外的思考。