angular - JWT（JSON Web Token）分析

发布时间：2019-03-06 16:33:18 修改时间：2019-03-06 16:33:18 阅读：6140 评论：0 0

版本说明：

@ auth0 / angular-jwt v2将与Angular v6 +和RxJS v6 +一起使用。对于Angular v4.3到v5 +，请使用@ auth0 / angular-jwt v1




区别于session验证：

session：认证中，每个用户都要生成一份session，这份session通常保存在内存中，随着用户量的增加，服务端的开销会增大，而且对分布式应用不是很友好。

token：认证中，服务端不需要保留用户认证信息。当用户登录时，服务器验证用户信息后会返回一个token，这个token存储在客户端，并且在每次请求的请求头中都带上这个token，这样服务端验证token后就可以返回数据。





JWT（JSON Web Token）是一个开放标准（RFC 7519） 

它定义了一种紧凑且独立的方式，可以在各方之间作为JSON对象安全地传输信息。 此信息可以通过数字签名进行验证和信任。特别适用于分布式站点的单点登录（SSO）场景。





优点：

简便：只要用户登陆后，使用 JWT 认证仅需要添加一个 http header 认证信息，这可以用一个函数简单实现，我们会在后面的例子中看到这一点。

紧凑：JWT token 是一个 base 64 编码的字符串，包含若干头部信息及一些必要的数据，非常简单。签名后的 JWT 字符串通常不超过 200 字节。

安全：JWT 可以使用 RSA 或 HMAC 加密算法进行加密，确保 token 有效且防止篡改。





JWT由 . 分隔的三个部分组成（ header.payload.signature），它们是：

头部（Header）

荷载（Playload）

签名（Signature）









使用方法：

1、安装

npm install @auth0/angular-jwt --save

2、module中引入模块

import { JwtModule } from '@auth0/angular-jwt';

import { HttpClientModule } from '@angular/common/http';

export function tokenGetter(){

 return localStorage.getItem('token');

}

@NgModule({

 bootstrap: [AppComponent],

 imports: [

  // ...

  HttpClientModule,

  JwtModule.forRoot({

   config: {

    tokenGetter: tokenGetter,

    whitelistedDomains: ['localhost:3001'],

    blacklistedRoutes: ['localhost:3001/auth/']

   }

  })

 ]

})

export class AppModule {}

配置说明：

tokenGetter ：从localStorage中获取token；

whitelistedDomains ：允许发送认证的请求的域名；

blacklistedRoutes ：你不希望替换header中 Authorization 信息的api列表。





1、tokenGetter: function

这tokenGetter是一个返回用户令牌的函数。该函数只需要对存储令牌的任何地方进行检索调用。在许多情况下，令牌将存储在本地存储或会话存储中。

// ...

JwtModule.forRoot({

  config: {

    // ...

    tokenGetter: () => {

      return localStorage.getItem('access_token');

    }

  }

});

2、whitelistedDomains: array


经过身份验证的请求只应发送到您知道并信任的域。注意：只有在请求跨域的情况下设置，同域无需设置。

标准http端口80和https端口443请求不需要指定端口。如果要针对非标准端口（例如localhost：3001）进行身份验证，则只需在列入白名单的主机名中使用端口

// ...

JwtModule.forRoot({

  config: {

    // ...

    whitelistedDomains: ['localhost:3001', 'foo.com', 'bar.com']

  }

});


3、blacklistedRoutes: array


如果您不想替换特定路由的授权标头，请在此处列出。如果您的初始身份验证路由位于列入白名单的域并采用基本身份验证标头，则此功能非常有用。

// ...

JwtModule.forRoot({

  config: {

    // ...

    blacklistedRoutes: [

      'localhost:3001/auth/',

      'foo.com/bar/',

      /localhost:3001\/foo\/far.*/

    ] // strings and regular expressions

  }

});









配置选项（JwtHelperService: service）:

1、isTokenExpired (旧版方法)：

import { JwtHelperService } from '@auth0/angular-jwt';

// ...

constructor(public jwtHelper: JwtHelperService) {}

ngOnInit() {

console.log(this.jwtHelper.isTokenExpired()); // true or false

}





2、getTokenExpirationDate

import { JwtHelperService } from '@auth0/angular-jwt';

// ...

constructor(public jwtHelper: JwtHelperService) {}

ngOnInit() {

console.log(this.jwtHelper.getTokenExpirationDate()); // date

}





注意事项：

保存好secret秘钥，这个秘钥只能在服务端存在

给token设置一个过期时间，因为一旦token生成，它就永远有效，除非token密钥被更改或过期

在payload中只能存储一些业务逻辑所必要的非敏感信息

---