加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

在Angular 4中处理来自Api的过期令牌

发布时间:2020-12-17 07:11:58 所属栏目:安全 来源:网络整理
导读:我需要帮助处理我的角度应用程序中的过期令牌.我的api有过期的时间但我的问题是当我忘记退出我的角度应用程序,一段时间后,我仍然可以访问主页但没有数据.我能做些什么吗?是否有可以处理此问题的库?或者有什么我可以安装?更好,如果我没有安装任何东西.这是
我需要帮助处理我的角度应用程序中的过期令牌.我的api有过期的时间但我的问题是当我忘记退出我的角度应用程序,一段时间后,我仍然可以访问主页但没有数据.我能做些什么吗?是否有可以处理此问题的库?或者有什么我可以安装?更好,如果我没有安装任何东西.这是我的身份验证码?我可以添加任何可以处理过期的内容吗?如果过期,我将无法访问该主页.

auth.service.ts

export class AuthService {
  private loggedIn = false;

  constructor(private httpClient: HttpClient) {
  }

  signinUser(email: string,password: string) {  
    const headers = new HttpHeaders() 
    .set('Content-Type','application/json');

    return this.httpClient
    .post(
      'http://sample.com/login',JSON.stringify({ email,password }),{ headers: headers }
    )
    .map(
        (response: any) => {
          localStorage.setItem('auth_token',response.token);
          this.loggedIn = true;
          return response;
        });
   }

    isLoggedIn() {
      if (localStorage.getItem('auth_token')) {
        return this.loggedIn = true;
      }
    }

   logout() {
     localStorage.removeItem('auth_token');
     this.loggedIn = false;
    }
}

authguard.ts

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router,private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {

    if (this.authService.isLoggedIn()) {
      // logged in so return true
      return true;
    }

    else {
      // not logged in so redirect to login page with the return url
      this.router.navigate(['signin'])
      return false;
      }
  }
}

解决方法

我认为你可以使用两种解决方案.

第一个你可以在浏览器关闭时叫你注销功能,如:

@HostListener('window:unload',['$event'])
  handleUnload(event) {
    this.auth.logout();
  }

https://developer.mozilla.org/de/docs/Web/Events/unload

要么

@HostListener('window:beforeunload',['$event'])
      public handleBeforeUnload(event) {
        this.auth.logout();
      }

https://developer.mozilla.org/de/docs/Web/Events/beforeunload

这种方式总是在浏览器关闭时你的this.auth.logout();将自动调用.

其次,您可以像angular2-jwt一样安装库,它可以帮助您检测if token has expired

jwtHelper: JwtHelper = new JwtHelper();

useJwtHelper() {
  var token = localStorage.getItem('token');

  console.log(
    this.jwtHelper.decodeToken(token),this.jwtHelper.getTokenExpirationDate(token),this.jwtHelper.isTokenExpired(token)
  );
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读