首页 > 解决方案 > 角度全局函数

问题描述

我正在构建一个支持 JWT 身份验证的 Angular 应用程序。我使用 Spring Boot 构建我的 JWT 服务器。用户提供他/她的凭据进行身份验证。成功认证后,包含访问令牌和认证的响应将被转发给用户。我的 JWT 访问令牌中有一个包含令牌寿命的 exp 值。刷新令牌保存在数据库中。要获取新的访问令牌,您必须发送带有此标头的请求 --->>>X-Auth: refreshToken<<<--- 以获取新的访问令牌。我实现了一个函数,它将使用刷新令牌重新发送对访问令牌的请求。我曾尝试实现该功能以全局运行该功能,但无济于事。我想知道是否有一种方法可以在我的 Angular 应用程序中全局运行该函数。

/***Login sample request***/
{
    "password": "secret123",
    "username": "nkengbeza"
}

/***Login sample response***/
{
    "access_token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJua2VuZ2JlemEiLCJhdXRoIjpbeyJhdXRob3JpdHkiOiJBRE1JTiJ9XSwidG9rZW5fdHlwZSI6ImFjY2Vzc190b2tlbiIsImlhdCI6MTU0ODY2OTE0MSwiZXhwIjoxNTQ4NjcyNzQxfQ.oaWOIaeMqLg35unM82bcNg88ga030m5J1k7E5EM2O0s",
    "refresh_token": "a102c7a063c7f149bcb276eadf83c0c61659ff9b37c0a8ab7d29e92c08ac94e7aa99abc5e9a3c1c59da4e66f1ada0c6a02dca2f577a4aa3f81885c73f5a879d1"
}

/***Request for an access token using a valid refresh token***/
reLogin() {
    (async () => {
      const resp = await fetch(AppRoutes.RELOAD_AUTH, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'X-Auth': this.getAuth().refreshToken
        }
      });

      if (resp.status !== 200) {
        this.doLogout();
      }

      const content = await resp.json();

      const accessToken = content.access_token;
      const tokenInfo = this.getDecodedAccessToken(accessToken); // decode token
      const auth = new Auth();

      auth.refreshToken = content.refresh_token;
      auth.role = tokenInfo.auth[0];
      const expireDate = tokenInfo.exp; // get token expiration dateTime

      this.setAccessToken(accessToken);
      this.setAuth(auth);

    })();
  }

标签: javascriptangularuser-interfacejwtweb-frontend

解决方案


推荐阅读