AngularJs注销动作

时间:2016-03-10 15:41:12

标签: javascript angularjs authentication login single-page-application

我已经在我的应用中基于jwt令牌实现了身份验证。但是我在注销操作方面遇到了一些麻烦。当我按下注销时,我只是从access_token值清除本地存储。

让我们想象一下,该用户使用我的应用打开了三个浏览器标签。其中一个是不受保护的,有一些未保存的用户输入(tab1)。其他选项卡(tab2,tab3)具有受保护的资源。当用户按下tab3上的注销按钮时,我想在登录页面上重定向他(因为他在受保护的选项卡上)。此外,我想在登录页面上重定向他,因为它也有不受保护的资源。但我不想将他从tab1重定向(因为它没有受到保护),我不想更新它,因为用户将放弃他的输入。我该如何实现呢?

1 个答案:

答案 0 :(得分:2)

TL; DR:为了实现这一目标,您需要实施WebSockets

基于HTTP的角度工作编写的标准单页面应用程序,根据wikipedia

  

HTTP在客户端 - 服务器计算模型中用作请求 - 响应协议。例如,web浏览器可以是客户端,并且在托管网站的计算机上运行的应用程序可以是服务器。客户端向服务器提交HTTP请求消息。服务器提供诸如HTML文件和其他内容之类的资源,或代表客户端执行其他功能,向客户端返回响应消息。响应包含有关请求的完成状态信息,还可能在其消息正文中包含请求的内容。

请求 - 响应是计算机之间通信的基本方法之一。一台计算机发送一个请求,另一台发回一个响应 - 它就是这么简单(表面上看。底层技术处理了很多东西,但是这个答案超出了范围)。

但是,与任何(简单)技术一样,它有其约束。请求包含有关其发件人的信息。收到请求后,服务器会处理该请求,会向发出请求的实体发送回复

现在让我们考虑你的场景

您的应用有3个已打开的标签,此处有2个问题:

  1. 假设您在选项卡3上注销。因为您使用JWT令牌身份验证(实际上任何令牌身份验证的行为都相似),正确的注销操作只需从SPA中的本地存储中删除令牌选项卡3上的项目实例。在这种情况下,选项卡1和2中项目的应用程序状态不会更改。此外,注销不需要向服务器发出任何请求,因此不会发送任何会以某种方式通知用户更改的身份验证状态的响应。

  2. 即使您向服务器发送请求以通知它有关选项卡3上的注销操作,服务器也不知道其他2个已打开的选项卡,因为请求仅保存有关发出请求的实体的信息,因此它只会向第三个选项卡发送响应。

  3. 输入WebSockets

    注意:在阅读之前,我想提一下我没有使用websockets的实际经验,所以你可以把我写的所有东西都拿出来。

    再次,根据wikipedia(重点是我的):

      

    WebSocket协议使浏览器和网站之间的交互更加可能,促进了与服务器之间的实时数据传输。这可以通过为服务器提供标准化的方式来向客户端发送内容到浏览器而无需请求,并允许在保持连接打开的同时来回传递消息。通过这种方式,可以在浏览器和服务器之间进行双向(双向)正在进行的对话。

    WebSockets提供full-duplex communication频道,这意味着服务器不仅提供对客户端请求的响应,还启动数据传输。这解决了上面提到的第二个问题,让您完成解决第一个问题的任务 - 通知服务器注销用户。一旦服务器知道用户已注销,它就会将此事实传达给所有其他客户端,从而在所有选项卡中同步单页应用程序的状态。

    Angular不提供开箱即用的websockets支持,但是有一些模块可以让您在项目中使用它们。只是谷歌吧。

    希望这会对你有所帮助。