标签: single-page-application

使用Angular,Ember,React等框架构建SPA风格的应用程序时,人们认为什么是身份验证和会话管理的最佳实践？我可以想到几种方法来考虑解决问题.

1. 假设API和UI具有相同的原始域,则与使用常规Web应用程序的身份验证没有什么不同.

   这可能涉及具有会话cookie,服务器端会话存储以及可能的一些会话API端点,经过身份验证的Web UI可以点击以获取当前用户信息以帮助个性化或甚至可能确定客户端上的角色/能力.当然,服务器仍会强制执行保护数据访问的规则,UI只会使用此信息来自定义体验.

2. 像使用公共API的任何第三方客户端一样对待它,并使用类似于OAuth的某种令牌系统进行身份验证.客户端UI将使用此令牌机制来验证对服务器API发出的每个请求.

我在这里并不是一位专家,但对于绝大多数情况来说,#1似乎已经足够了,但我真的很想听到一些更有经验的意见.

我读过SPA及其优点.我发现他们中的大多数都不能令人信服.有三个优点引起了我的怀疑.

问题: 你能否作为SPA的拥护者并证明我对前三个陈述有误？

                              === ADVANTAGES ===

1. SPA非常适合响应迅速的网站:

服务器端呈现很难为所有中间状态实现 - 小视图状态不能很好地映射到URL.

单页应用程序的区别在于它们能够重绘UI的任何部分而无需服务器往返来检索HTML.这是通过具有处理数据的模型层和从模型读取的视图层将数据与数据表示分离来实现的.

为非SPA持有模型层有什么问题？SPA是客户端唯一与MVC兼容的架构吗？

2.使用SPA,我们不需要对服务器使用额外的查询来下载页面.

哈,用户在访问您的网站时可以下载多少页？二三？相反,出现了另一个安全问题,您需要将登录页面,管理页面等分成单独的页面.反过来,它与SPA架构发生冲突.

3.可能还有其他优势吗？不要听到任何其他..

                            === DISADVANTAGES ===

1. 客户端必须启用javascript.
2. 只有一个网站入口点.
3. 安全.

PS我曾参与SPA和非SPA项目.我问这些问题因为我需要加深理解.没有理由伤害SPA支持者.不要让我再读一些关于SPA的信息.我只是想听听你对此的考虑.

你如何明确地检测用户是否按下了浏览器中的后退按钮？

如何使用#URL系统在单页Web应用程序中强制使用页内后退按钮？

为什么地球上没有浏览器按钮触发他们自己的事件!？

我一直在研究如何根据谷歌的指示谷歌可以抓取SPA .尽管有很多一般性的解释,但我找不到更详尽的逐步教程和实际示例.完成此操作后,我想分享我的解决方案,以便其他人也可以使用它,并可能进一步改进它.
我使用MVC与Webapi控制器和Phantomjs在服务器端,并迪朗达尔与客户端push-state启用; 我还使用Breezejs进行客户端 - 服务器数据交互,我强烈推荐所有这些,但我会尝试给出一个足够的解释,也可以帮助人们使用其他平台.

当应用程序依赖无状态身份验证(使用HMAC之类的东西)时,是否有必要使用CSRF保护？

例:

• 我们有一个单页应用程序(否则我们必须在每个链接上附加令牌:<a href="...?token=xyz">...</a>.

• 用户使用身份验证自己POST /auth.成功验证后,服务器将返回一些令牌.

• 令牌将通过JavaScript存储在单页面应用程序内的某个变量中.

• 此令牌将用于访问受限制的URL,例如/admin.

• 令牌将始终在HTTP标头内传输.

• 没有Http Session,也没有Cookies.

据我所知,应该(？!)不可能使用跨站点攻击,因为浏览器不会存储令牌,因此它无法自动将其发送到服务器(这就是使用Cookies时会发生的情况/会议).

我错过了什么吗？

我意识到这是一个基本问题,但我没有在其他地方找到答案.

是store.dispatch同步还是异步Redux？

如果它是异步的,有可能在动作传播之后添加回调,因为它可以用React？

假设我有一个单页应用程序,它使用第三方API作为内容.应用程序的逻辑仅在浏览器中,并且没有我可以写入的后端.

为了允许深度链接到应用程序的状态,我使用pushState来跟踪确定应用程序状态的一些变量(注意Ubersicht的公共版本还没有这样做).在这种情况下repos,labels,milestones和username,show_open(布尔)和with_comments(布尔)和without_comments(布尔).URL格式是?label=label_1,label_2,label_3&repos=repo_1….值通常是嫌疑人,大致[a-zA-Z][a-zA-Z0-9_-]或任何布尔指标.

到现在为止还挺好.现在,因为查询字符串可能有点长而且不实用,并且我希望能够传递类似http://espy.github.io/ubersicht/?state=SOMOPAQUETOKENTHATLOSSLESSLYDECOMPRESSESINTOTHEORIGINALVALUES#hoodiehq的URL ,越短越好.

我的第一次尝试是使用一些类似zlib的算法(https://github.com/imaya/zlib.js)和@flipzagging指向antirez/smaz(https // github.com/antirez/smaz)听起来更适合短字符串(JavaScript版本在https://github.com/personalcomputer/smaz.js).

由于=和&没有具体处理https://github.com/personalcomputer/smaz.js/blob/master/lib/smaz.js#L9,我们也许能够调整的东西有一点点.

此外,还有一个选项可以对固定表中的值进行编码,例如,参数的顺序是预定义的,我们需要跟踪的是实际值.例如,可能在smaz压缩之前a=hamster&b=cat变成7hamster3cat(长度+字符)或仓鼠|猫(值+ |).

还有什么我应该找的吗？

我目前正在使用angularjs编写一个Web应用程序,但我认为这个问题适用于在客户端进行路由的任何客户端javascript框架(如角度所做).

在单页面应用中,处理错误网址的正确方法是什么？

查看几个主要网站,如果您在https://mail.google.com/mail/下面输入任意随机网址,我会看到Gmail会重定向到收件箱.这发生在服务器端(使用http 300代码)或客户端,具体取决于错误路径是在#字符之前还是之后.另一方面,twitter显示任何无效URL的真实HTTP 404.第三种选择是显示"软"404,纯粹的客户端错误页面.

这些解决方案似乎适合不同的情况.Twitter希望Twitter用户和推文的链接是真实的链接,因此人们可以分享它们,在新闻文章中发布它们等,因此无效链接被识别是非常重要的(如果我的推文链接断开了)我的网站,一个简单的爬行会告诉我).另一方面,在gmail中,您不应该将链接分享到您的收件箱中,我甚至不确定链接是否真的是永久性/持久性的:似乎网址更新主要用于浏览器历史记录导航的目的.单页应用.给出软错误的第三种方法可能适用于类似于gmail的情况,但是没有合理的"默认"页面.

经过这么长时间的介绍,这里有一些具体的问题:

• 提供"软"错误页面而不是404错误是否可以接受,或者如果网址无效,单页应用是否应始终重定向到真实404？
• Gmail的代码可能完全没有错误,但如果它确实存在导致无效链接最终重定向回收件箱的错误,那么对于用户而言可能比错误页面更加混乱.对于那里的大多数网络应用程序,它们没有像gmail那样经过良好测试,显示错误页面会更好吗？
• 要为单页面应用程序实现真正的404,似乎有必要在服务器端复制路由逻辑.有没有办法解决？
• 当重定向到404时,我认为用户应该能够看到导致错误的URL,可能在URL栏中.使用html5历史API,我认为这可以通过简单地触发当前页面的重新加载(使用错误的URL),结合上面提到的服务器端路由来实现.对于不支持此功能或使用hashbang表示法的浏览器,这似乎不可行.支持所有浏览器的最佳方式是什么？

注意:这个问题也可以是:

如何在Java中支持hashbang-less客户端mvc框架的书签.

我过渡使用的角度应用hashtags到一个是html5mode.我成功了

$locationProvider.html5Mode(true);

来自着陆页(index.html)的所有链接都可以正常工作.

问题是,如果直接引用部分URL,我自然会得到404,因为服务器端点定义没有耦合到客户端定义的路由.

因此,如果没有HTML5,我们会得到非SEO友好的hashbang,但是有了它,我们就不能为登陆页面(bootstraps angular的页面)以外的任何内容添加书签.

如果首先请求默认登录页面(index.html),为什么它可以工作,即htpp://mydomain.com/:

1. 浏览器从服务器请求index.html
2. 服务器返回index.html,浏览器加载角度框架
3. URL更改将发送到客户端路由器并加载正确的部分.

如果直接从浏览器请求(即)http://mydomain.com/foo,为什么它不起作用:

1. 浏览器从服务器请求mydomain/foo.
2. 资源不存在
3. 服务器返回404

这个故事遗漏了一些东西,我只是不知道是什么.以下是我能看到的唯一两个答案......

• 这是设计的. 这是它应该如何工作？用户必须始终登陆客户端MVC框架的引导页面(通常是index.html),然后从那里导航.这不是理想的,因为状态无法保存,无法书签......更不用说抓取了.
• 服务器方案. 这是否与服务器端技巧有关？例如,在所有请求上,返回index.html并立即使用其他上下文调用路由器.如果是这样,这违背了AngularJS完全是客户端并且看起来像黑客的目标.

使用OAuth时(2)我需要在我的应用程序中使用重定向端点,一旦我通过身份验证,OAuth提供服务就可以重定向到该端点.

如何在单页面应用程序中处理此问题？当然,重定向到OAuth提供服务并不好,甚至可能无法重定向.

我知道OAuth还支持基于用户名/密码的令牌生成.这与AJAX调用完美配合,但要求我的单页应用程序要求输入用户名和密码.

你通常如何处理这个？