angular 中 link 上没有路由时如何处理会话超时(或过期令牌) 4
How to deal with session timeout (or expired token), when there is no routing on link in angular 4
我有一个非常常见的令牌过期情况,如下所示,Kindle 帮助我解决了这个问题。
我的应用程序会话是 30 分钟,现在假设,我在一个页面上的时间超过 30 分钟,然后单击任何其他页面 link。所以它将重定向到登录页面。在这里,通过路由重定向,这样主动警卫就会出现并检查令牌是否过期,然后重定向到登录页面。到目前为止它看起来不错。它工作正常。
但是,可以说,我在同一页面上有一个刷新 link(通过调用新的 get http 请求刷新 table 记录),它只刷新 table 记录(它不刷新整个页面)。如果我在同一页面上超过 30 分钟,然后单击刷新按钮,如何检查令牌是否已过期。因为,在这种刷新场景中,路由没有被使用,所以它不会去主动守卫检查令牌是否过期。
能否请您指导我如何处理这个用例。
提前致谢!!!
在你的 CanActivate
路由守卫中,你可能会返回 Promise<boolean>
或 Observable<boolean>
或 boolean
。
但是在同一个保护文件中,您可能还依赖于 returns 对您 true
或 false
的服务,具体取决于令牌是否已过期。这是 in-turn 您可能会从 Guard 返回的东西。
让我们假设 AuthService 正在检查 Auth Token 是否已过期。数据服务正在为您获取数据。
现在,在刷新此数据之前,您可以再次检查是否相同,方法是将此 AuthService 作为依赖注入到数据服务中,然后检查令牌是否已过期。
或者,您的API可以检查此请求是否已通过身份验证。为此,您需要为每个请求发送授权 Header。在这种情况下,您可以使用 HttpInterceptor
。此拦截器将拦截每个传出请求,以检查它是否有 Authorization
header 存在。如果存在,只有到那时它才会允许请求继续进行。如果没有,您可以通过将用户导航回登录页面来完成必要的工作。
在我们的环境中,为了尽可能提供最好的用户体验,用户不会在会话到期时重定向到登录页面。
相反,整个页面是模糊的,并显示一个模式,要求输入密码并包含一个提交按钮,如上所示。
这种方法的主要优点是:
- 避免因在重定向期间丢失未保存的工作而感到沮丧。
- 更无缝的重认证体验
类似于此处描述的一些答案 - https://ux.stackexchange.com/questions/7195/best-practices-for-warning-of-session-expiration
如何在 Angular 中实现?
- 在第一次成功登录时,写入会话将要执行的 date/time
过期到 localStorage 例如
new Date() + 30 minutes.
- 在应用级别注入例如
authentication.service.ts
,这将
有一个 setInterval(() => checkSessionTimeout(), e.g every 1 minute)
在它的构造函数中。这种方法将确保这种方法
将 运行 在新标签页上 / windows 也是。
- 创建一个方法
checkSessionTimeout()
输出多少分钟
剩余直到会话超时并将其写入变量中
authentication.service.ts
例如 sessionTimeoutIn: number;
- 创建一个包含重新验证模态的组件
如上图所示。在应用程序级别注入此组件
<app-re-authenticate-modal *ngIf="authenticationService.sessionTimeoutIn <= 0"></app-re-authenticate-modal>
- 为了模糊效果,添加一个 class 到你的 body / main 和
[class.blur]="authenticationService.sessionTimeoutIn <= 0"
- 为了更好的体验,创建一个 div 推送主 /
body,并从包含它的顶部进入视图,它可以
用
<div
*ngIf="authenticationService.sessionTimeoutIn > 0 && authenticationService.sessionTimeoutIn <= 2"></div>
: 控制
在这些之后,用户除了重新验证之外不能尝试做任何事情,你仍然可以使用你的 AuthenticationGuards。
希望对您有所帮助。
我有一个非常常见的令牌过期情况,如下所示,Kindle 帮助我解决了这个问题。
我的应用程序会话是 30 分钟,现在假设,我在一个页面上的时间超过 30 分钟,然后单击任何其他页面 link。所以它将重定向到登录页面。在这里,通过路由重定向,这样主动警卫就会出现并检查令牌是否过期,然后重定向到登录页面。到目前为止它看起来不错。它工作正常。
但是,可以说,我在同一页面上有一个刷新 link(通过调用新的 get http 请求刷新 table 记录),它只刷新 table 记录(它不刷新整个页面)。如果我在同一页面上超过 30 分钟,然后单击刷新按钮,如何检查令牌是否已过期。因为,在这种刷新场景中,路由没有被使用,所以它不会去主动守卫检查令牌是否过期。
能否请您指导我如何处理这个用例。
提前致谢!!!
在你的 CanActivate
路由守卫中,你可能会返回 Promise<boolean>
或 Observable<boolean>
或 boolean
。
但是在同一个保护文件中,您可能还依赖于 returns 对您 true
或 false
的服务,具体取决于令牌是否已过期。这是 in-turn 您可能会从 Guard 返回的东西。
让我们假设 AuthService 正在检查 Auth Token 是否已过期。数据服务正在为您获取数据。
现在,在刷新此数据之前,您可以再次检查是否相同,方法是将此 AuthService 作为依赖注入到数据服务中,然后检查令牌是否已过期。
或者,您的API可以检查此请求是否已通过身份验证。为此,您需要为每个请求发送授权 Header。在这种情况下,您可以使用 HttpInterceptor
。此拦截器将拦截每个传出请求,以检查它是否有 Authorization
header 存在。如果存在,只有到那时它才会允许请求继续进行。如果没有,您可以通过将用户导航回登录页面来完成必要的工作。
在我们的环境中,为了尽可能提供最好的用户体验,用户不会在会话到期时重定向到登录页面。
相反,整个页面是模糊的,并显示一个模式,要求输入密码并包含一个提交按钮,如上所示。
这种方法的主要优点是:
- 避免因在重定向期间丢失未保存的工作而感到沮丧。
- 更无缝的重认证体验
类似于此处描述的一些答案 - https://ux.stackexchange.com/questions/7195/best-practices-for-warning-of-session-expiration
如何在 Angular 中实现?
- 在第一次成功登录时,写入会话将要执行的 date/time
过期到 localStorage 例如
new Date() + 30 minutes.
- 在应用级别注入例如
authentication.service.ts
,这将 有一个setInterval(() => checkSessionTimeout(), e.g every 1 minute)
在它的构造函数中。这种方法将确保这种方法 将 运行 在新标签页上 / windows 也是。 - 创建一个方法
checkSessionTimeout()
输出多少分钟 剩余直到会话超时并将其写入变量中authentication.service.ts
例如sessionTimeoutIn: number;
- 创建一个包含重新验证模态的组件
如上图所示。在应用程序级别注入此组件
<app-re-authenticate-modal *ngIf="authenticationService.sessionTimeoutIn <= 0"></app-re-authenticate-modal>
- 为了模糊效果,添加一个 class 到你的 body / main 和
[class.blur]="authenticationService.sessionTimeoutIn <= 0"
- 为了更好的体验,创建一个 div 推送主 /
body,并从包含它的顶部进入视图,它可以
用
<div *ngIf="authenticationService.sessionTimeoutIn > 0 && authenticationService.sessionTimeoutIn <= 2"></div>
: 控制
在这些之后,用户除了重新验证之外不能尝试做任何事情,你仍然可以使用你的 AuthenticationGuards。
希望对您有所帮助。