AngularJs注销行动 [英] AngularJs logout action
问题描述
我已实施认证的基础上，在我的应用程序JWT令牌。但我有一些麻烦注销操作。当我preSS注销，我只是清楚我从的access_token 值本地存储。
I have implemented authentication, based on jwt tokens in my app. But I have some trouble with logout action. When I press logout, I simply clear my local storage from access_token value.
让我们想象一下，该用户与我的应用程序开了三家浏览器标签。其中之一是不受保护的，并有一些未保存的用户输入（TAB1）。其他选项卡（TAB2，TAB3）保护了资源。当用户TAB3 preSS注销按钮，我想他重定向登录页面上（因为他是受保护的选项卡上）。此外，我想他重定向登录页面上时，他做TAB2活跃，因为它也有不受保护的资源。但我不想把他从TAB1重定向（因为它是不受保护的），我不想续约，因为用户将失去他的投入。我怎样才能实现呢？
Let's imagine, that user opened three browser tabs with my app. One of them is unprotected and there is some unsaved user input (tab1). Other tabs (tab2,tab3) have protected resources. When user press logout button on tab3, I want to redirect him on login page (because he is on protected tab). Also I want to redirect him on login page when he makes tab2 active, because it also has unprotected resources. But I do not want to redirect him from tab1 (because it is unprotected), and I do not want to renew it, because user will loose his input. How can I implement this?
推荐答案
TL; DR：为了实现这一点，你需要实现的的WebSockets 。
TL;DR: In order to achieve this, you'll need to implement WebSockets.
写在HTTP上棱角分明的作品，一个标准的单页的应用程序，而根据维基百科：
A standard single page application written in angular works over HTTP, which, according to wikipedia:
HTTP函数如在客户端 - 服务器计算模型的请求 - 响应协议。网络浏览器，例如，可以是在客户机和托管网站可以是在服务器的计算机上运行的应用程序。该客户机提交一个HTTP请求消息发送到服务器。服务器，它提供的资源，例如HTML文件等内容，或代表客户机的执行其它功能，返回响应消息给客户端。响应包含关于请求完成状态信息，并且还可以含有在其消息主体请求的内容。
HTTP functions as a request–response protocol in the client–server computing model. A web browser, for example, may be the client and an application running on a computer hosting a web site may be the server. The client submits an HTTP request message to the server. The server, which provides resources such as HTML files and other content, or performs other functions on behalf of the client, returns a response message to the client. The response contains completion status information about the request and may also contain requested content in its message body.
请求 - 响应是计算机之间的通信的基本方法之一。一台计算机发送一个请求，另一个发回一个响应 - 它只是这么简单（表面上的底层技术处理了很多东西，但它的出范围在这个答案）
Request-response is one of the basic methods of communication between computers. One computer sends a request, the other one sends back a response - it's just so simple (on the surface. The underlying technology handles a lot of stuff, but it's out of the scope in this answer).
但是，与任何（简单）的技术，它有其限制。请求包含有关其发件人信息。在接收到请求时，服务器处理并将发回给发出请求的实体的响应的
But, as with any (simple) technology, it has its constraints. A request contains information about its sender. Upon receiving a request, the server handles it and sends back a response to the entity that issued the request.
您有3个与您的应用程序打开的选项卡和2个问题在这里：
You have 3 opened tabs with your app and 2 problems here:
-
假设你注销的标签3.因为你使用JWT令牌认证（实际上任何令牌认证行为与此类似），正确的注销行动包括刚刚从SPA本地存储的删除令牌标签3 项目实例。该项目在标签1和2中的应用程序状态不会在这种情况下发生变化。此外，注销不需要到服务器的任何请求，因此没有响应发送会以某种方式通知用户更改的认证状态。
Suppose you log out on tab 3. Because you use JWT token authentication (actually any token authentication behaves similarly), the proper log out action consists of just removing the token from your local storage in the SPA project instance on the tab 3. The application state of the project in tab 1 and 2 does not change in this case. Also, logging out doesn't require any request to the server, thus no response is send that would somehow notify of the changed authentication status of the user.
即使你发送一个请求到服务器，以通知其有关注销动作片3，服务器不知道其他2打开的标签，，因为要求持有大约只有发出请求的实体的资料，因此它只会发送到第三个标签的响应。
Even if you'll send a request to the server to notify it about the log out action on the tab 3, the server does not know about other 2 opened tabs, because the request holds information only about the entity that issued the request, thus it will just send a response to the third tab.
注意：阅读之前，我想提一提，我没有使用WebSockets的实践经验，这样你就可以采取一切我半信半疑写
Entering WebSockets
Note: Before reading on, I want to mention that I don't have practical experience with websockets, so you can take everything I write with a grain of salt.
此外，根据维基（亮点是我的）：
Again, according to wikipedia (highlights are mine):
的WebSocket协议使一个浏览器和网站可能之间更多的互动，便于从和到服务器的实时数据传输。这是通过在服务器提供一个标准化的方式发送内容到浏览器，而成为可能正在征求客户端，并允许消息，同时保持连接打开被来回传递。在这种方式的双向（双向）正在进行的会话可以采取一个浏览器和服务器之间的地方。
The WebSocket protocol makes more interaction between a browser and a website possible, facilitating the real-time data transfer from and to the server. This is made possible by providing a standardized way for the server to send content to the browser without being solicited by the client, and allowing for messages to be passed back and forth while keeping the connection open. In this way a two-way (bi-directional) ongoing conversation can take place between a browser and the server.
的WebSockets提供 的信道全双工通信，这意味着该服务器没有按'T只提供给客户端的请求响应，同时也启动数据传输。这解决了上面留下你解决了第一个问题任务中提到的第二个问题 - 通知有关日志服务器外出的用户。一旦服务器知道该用户已注销，它传达了这一事实给所有其他客户，从而同步所有选项卡中的单页应用程序的状态。
WebSockets provides a full-duplex communication channel, meaning that the server doesn't only provide responses to client's request, but also initiate data transmission. This solves the second problem mentioned above leaving you the task to solve the first problem - notifying the server about the logging out of the user. Once the server knows that the user has logged out, it communicates this fact to all other clients, thus synchronizing the state of your single page application among all tabs.
角不提供的WebSockets支持开箱即用，但也有，让您在项目中使用它们的可能性模块。它只是谷歌。
Angular doesn't provide websockets support out of the box, but there are modules that give you the possibility to use them in your project. Just google it.
希望这有助于你。
这篇关于AngularJs注销行动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
