时间戳

首页 > 解决方案 > 如果用户在 AuthGuard 的 canActivate 功能中处于空闲状态，则 Angular 中的会话超时

angular - 如果用户在 AuthGuard 的 canActivate 功能中处于空闲状态，则 Angular 中的会话超时

问题描述

当前在应用程序中，如果用户未通过身份验证，则他无法继续任何路线，但如果他/她已通过身份验证，则可以进行导航。这是通过 auth guard 中的 canActivate 函数实现的。如果我想在 5 分钟后用户空闲的情况下也有会话超时，那么通过 canActivate 函数和 Auth-Guard 实现它的方法是什么？

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
 export class AuthGuard implements CanActivate {

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (sessionStorage.getItem('currentUser')) {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/'], { queryParams: { returnUrl: state.url }});
    return false;
}
}

标签： angularsessionsession-timeoutauth-guard

解决方案

您可以使用基于令牌的 api 通信，创建具有过期时间的令牌。使用以下库进行令牌通信

npm install --save @auth0/angular-jwt

并使用 Auth 服务类

import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
@Injectable()
export class AuthService {
  constructor(public jwtHelper: JwtHelperService) {}
  public isAuthenticated(): boolean {
  const token = localStorage.getItem('token');
  // Check whether the token is expired and return
  // true or false
  return !this.jwtHelper.isTokenExpired(token);
 }
}

并且改变canActivate方法如下

canActivate(): boolean {
if (!this.auth.isAuthenticated()) {
  this.router.navigate(['login']);
  return false;
}
return true;
}

编辑

您可以使用令牌或 cookie。代码如下

import { Injectable } from '@angular/core';
import { Cookie } from 'ng2-cookies/ng2-cookies';

@Injectable()
export class AuthCookie {
constructor() { }

getAuth(): string {
    return Cookie.get('id_token');
}

setAuth(value: string): void {
   //use for 5 minuts, Cookies value set seconds to days, 5/1440
    Cookie.set('cookie_token', value, 0.003472);
}

deleteAuth(): void {
    Cookie.delete('id_token');
}
}

看这里 Cookies vs Token

推荐阅读