如何以角度处理会话到期？

Posted 2023-02-27

【中文标题】如何以角度处理会话到期？

【英文标题】：How to handle session expiry in angular?

【发布时间】：2018-10-19 03:03:42

【问题描述】：

我正在使用带有 Angular 应用程序的 Spring Boot 微服务。我使用 UAA 作为授权服务器。如果会话过期意味着应用程序应在弹出窗口中显示消息并应重定向到登录页面。如何在角度实现这一点？

任何人都可以提供解决方案吗？

感谢和问候

希尔帕·库尔卡尼

【参考方案1】：

您可以使用角度 http-interceptor 来拦截您的所有请求。当您的令牌或会话过期时，http 响应将是 401（未授权）。基于此，您可以将用户重定向到登录路由。 请参阅HttpInterceptor 的文档。

类似的东西。

export class YourInterceptor implements HttpInterceptor 
  constructor() 
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 

    return next.handle(request).do((event: HttpEvent<any>) => 
      if (event instanceof HttpResponse) 
        // do stuff with response if you want
      
    , (err: any) => 
      if (err instanceof HttpErrorResponse) 
        if (err.status === 401) 
          // redirect to the login route
          // or show a modal
        
      
    );
  

希望这会有所帮助。

【讨论】：

感谢您的回复。如果会话过期意味着在控制台中它正在尝试重定向到登录页面但跨域请求被阻塞。我收到以下错误：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost:8081/uaa/oauth/…。 （原因：CORS 预检通道未成功）。如何解决这个问题？

跨源请求被阻止：同源策略不允许读取位于localhost:8081/uaa/oauth/… 的远程资源。 （原因：CORS 预检通道未成功）。

您应该从后端启用 CORS。现在将 this 插件添加到 chrome 以启用 CORS 并测试您的前端代码。

@shilpa 你能在这里分享你的代码，你是如何检查会话过期的，我对上面的代码有点困惑

如果有“n”个请求拦截，我们如何显示模态？

【参考方案2】：

您需要检查HTTP 请求，例如，如果会话（令牌）过期并且用户试图从客户端进行一些 HTTP 调用，那么服务器必须返回一些相关的状态代码让我们说是 401。

因此，在这种情况下，您将检查服务器是否响应状态码 401，然后显示弹出窗口并重定向到 log in 屏幕。

【讨论】：

模糊的答案。不是特定场景