AngularJS客户端的注销功能

Posted 2023-03-08

【中文标题】AngularJS客户端的注销功能

【英文标题】：Logout function from AngularJS client side

【发布时间】：2017-01-10 16:13:53

【问题描述】：

我正在尝试使用 AngularJS 和基于令牌的身份验证机制从客户端练习登录和注册功能。但是，本文没有提到如何使用 AngularJS 从客户端处理注销和过期的身份验证令牌功能。

我的问题： 1）如果我想添加一个全局 html 注销按钮，并且如果用户按下该按钮，那么如何从客户端 Angular 脚本以及服务器端（.Net/C#）清除身份验证令牌？

2) 我将身份验证令牌的有效期（从服务器端代码 .NEt/C#）设置为 60 分钟。如果浏览器在 60 分钟或更长时间内处于空闲状态（根本没有用户交互），那么如果用户在 60 分钟或更长时间后继续在浏览器上工作，如何自动踢出站点并被引导到登录页面 -空闲时间？

提前谢谢你。

文章链接：

Getting started with AngularJS and ASP.NET MVC - The long awaited Part Three

---

关于文章作者使用的基于令牌的身份验证的一些摘要细节：

POST 令牌请求正文：

grant_type: 密码 用户名：[e-mail]（或您注册的任何名称） 密码：密码1！ （或注册时设置的任何密码）

和令牌响应：

“ACCESS_TOKEN”： “R-AejC88wImTKUulwlZBRsR620zXuHcrjV26UGObVjl5s9aqJIhs2hzt60CdLhL0hXNR-kyLTgrTfiMDV4JZJsmC1jV3MQHKcScsW6lYAMz1kegSyQiSfRHVj8W1E76x9uiHYJVIWhwA_RH7GkTn3K_Z0ugV_0qsSd1cWZ5qpqRedrS1vbHNIr7PR-FvAcKGA5c0S7ffadD8TP6N8OX8AyEg2t5rxppAeT2AlqlY3G5HdJqDkPgXQx5pL_xXRWkQCuOhIgUCm-6TDAksNf-EJ7HzPKD7nl7KU8Pd66rQO56p_vtq6eOO9OtgAmN8FviR-gNKGHCsz4udPrAKTExF_Ht4hBpbLoiGIXIbVUpzTeB-RMZUMMcRgByo4tCELjd41pV0mjaXHS6s7mTuwlgGmxiAU5AoYgNTXVOe9YegZMvjW_lAIUw0YlZ0m7RAiPOTTDlRzmV1ntm3YGvAN9h9_m027twqfGz5YsHsbh3RYW8”， "token_type": "承载者", “expires_in”：1209599， "用户名": "[e-mail]", ".issued": "2014 年 11 月 16 日星期日 22:55:45 GMT", ".expires": "2014 年 11 月 30 日星期日 22:55:45 GMT"

【问题讨论】：

你在客户端的哪里存储令牌？本地存储？您可以在“注销”按钮上将其从那里删除。

【参考方案1】：

Q1：正如 jpgrassi 所说，您可以删除/设置未定义的用户令牌，因为您将其存储在“注销”事件中（示例案例：SessionService.token）。

Q2：考虑到您知道如何设置 Owin，您可以更改 OAuthAuthorizationServerOptions 中的 AccessTokenExpireTimeSpan。 示例：

...
OAuthAuthorizationServerOptions OAuthServerOptions = new OAuthAuthorizationServerOptions() 
  AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(minutes) 
;
...
app.UseOAuthAuthorizationServer(OAuthServerOptions);

【讨论】：

感谢您的帮助。我使用 localStorage 存储令牌并在用户注销时将其清除。