header.payload.signature

header.payload.signature

ewogICJhbGciOiAiSFMyNTYiLAogICJ0eXAiOiAiSldUIgp9

{
 "sub": "1234567890",
 "name": "tc9011",
 "admin": true,
 "exp": 1441594722
}

HMACSHA256(
 base64UrlEncode(header) + "." +
 base64UrlEncode(payload),
 secret)

fetch('api/v1/user/1', {
 headers: {
  'Authorization': 'Bearer ' + token
 }
})

npm i koa-jwt jsonwebtoken --save

import * as jwt from 'koa-jwt';

app.use(jwt({
   secret: Secret
  }).unless({
   path: [/\/register/, /\/login/, /\/groups/],
  }));

export const errorHandle = (ctx, next) => {
 return next().catch((err) => {
  if (err.status === 401) {
   ctx.status = 401;
   handleError({ctx, message: '登录过期，请重新登录', err: err.originalError "htmlcode">

app.use(errorHandle);

app.use(jwt({
  secret: Secret
}).unless({
  path: [/\/register/, /\/login/, /\/groups/],
}));


在用户登陆时候，生成token，返回给客户端：


// 生成 token 返回给客户端
const token = jsonwebtoken.sign({
  user: {
    workNumber: user.workNumber,
    realName: user.realName,
    group: user.group,
    role: user.role
  },

  // 设置 token 过期时间
  exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24),  // 1天
}, Secret);

handleSuccess({
  ctx,
  message: '登陆成功!',
  response: {
    token,
    lifeTime: Math.floor(Date.now() / 1000) + (60 * 60 * 24)  // 1天
  }
});


需要注意的是，在使用 jsonwebtoken.sign() 时，需要传入的 secret 参数，这里的 secret 必须要与 前面设置 jwt() 中的 secret 一致。
客户端
在Angular中，我们需要使用 @auth0/angular2-jwt 这个库来帮助我们在Angular中处理JWT:


npm install @auth0/angular-jwt --save


在 app.module.ts 中引入 JwtModule 这个模块（注意，引入该模块的同时也要引入 HttpClientModule 模块）：


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 {}


在 JwtModule 的 config 中：
tokenGetter ：从localStorage中获取token；
whitelistedDomains ：允许发送认证的请求的域名；
blacklistedRoutes ：你不希望替换header中 Authorization 信息的api列表。
接着创建一个全局的 auth.service.ts 服务，方便在登陆的时候获取用户相关信息及权限，这个服务中有个 login 方法，用来处理登陆后返回的token信息，并把token存到LocalStorage中，这样在token失效前，下次用户登陆时就不需要输入用户名和密码：


login(loginInfo: LoginInfo): Observable<boolean> {
  return this.passportService.postLogin(loginInfo).pipe(map(
    (res: LoginRes) => {
      // 登陆成功后获取token，并存到localStorage
      this.storageService.setLocalStorage('token', res.token);
      const decodedUser = this.decodeUserFromToken(res.token);
      this.setCurrentUser(decodedUser);
      this.msg.success('登录成功!');
      return this.loggedIn;
    }
  )
                             );
}


在这个 login 方法中， decodeUserFromToken 封装了 @auth0/angular2-jwt 中提供的 decodeToken 方法，注意 decodeToken 方法解析出来的只是服务端 jsonwebtoken.sign() 中的JSON对象，所以需要通过 . 操作获取 jsonwebtoken.sign() 中定义的 user ：


decodeUserFromToken(token): User {
  return this.jwtHelperService.decodeToken(token).user;
}


在这个服务中，定义了两个变量 loggedIn 和 isAdmin ，用来标识用户是否登录和其相应的权限，方便在Angular路由中控制可以访问的视图。
有登录当然就有登出，登出时只需把token从LocalStorage中移除，并把几个变量重置即可：


logout(): void {
  this.storageService.removeLocalStorage('token');
  this.loggedIn = false;
  this.isAdmin = false;
  this.currentUser = new User();
}


AuthService 的完整代码如下：


import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

import { JwtHelperService } from '@auth0/angular-jwt';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { LoginInfo, LoginRes, User } from '../../views/passport/interfaces/passport';
import { PassportService } from '../../views/passport/services/passport.service';
import { StorageService } from '../storage/storage.service';
import { NzMessageService } from 'ng-zorro-antd';


@Injectable()
export class AuthService {
 public loggedIn = false;
 public isAdmin = false;
 public currentUser: User = new User();

 constructor(private jwtHelperService: JwtHelperService,
       private router: Router,
       private injector: Injector,
       private passportService: PassportService,
       private storageService: StorageService) {
  const token = localStorage.getItem('token');
  if (token) {
   const decodedUser = this.decodeUserFromToken(token);
   this.setCurrentUser(decodedUser);
  }
 }

 get msg(): NzMessageService {
  return this.injector.get(NzMessageService);
 }

 login(loginInfo: LoginInfo): Observable<boolean> {
  return this.passportService.postLogin(loginInfo).pipe(map(
   (res: LoginRes) => {
     this.storageService.setLocalStorage('token', res.token);
     const decodedUser = this.decodeUserFromToken(res.token);
     this.setCurrentUser(decodedUser);
     this.msg.success('登录成功!');
     return this.loggedIn;
    }
   )
  );
 }

 logout(): void {
  this.storageService.removeLocalStorage('token');
  this.loggedIn = false;
  this.isAdmin = false;
  this.currentUser = new User();
 }

 decodeUserFromToken(token): User {
  return this.jwtHelperService.decodeToken(token).user;
 }

 setCurrentUser(decodedUser): void {
  this.loggedIn = true;
  this.currentUser.workNumber = decodedUser.workNumber;
  this.currentUser.realName = decodedUser.realName;
  this.currentUser.group = decodedUser.group;
  this.currentUser.role = decodedUser.role;
  this.isAdmin = decodedUser.role > 10;
  delete decodedUser.role;
 }
}


至此，在你的Angular应用中就引入了JWT认证，当然，你也可以不使用 @auth0/angular2-jwt ，自己手写一个HTTP拦截器，手动设置每次请求的header：


@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>,
       next: HttpHandler): Observable<HttpEvent<any {

    const token = localStorage.getItem("token");

    if (token) {
      const cloned = req.clone({
        headers: req.headers.set("Authorization",
          "Bearer " + token)
      });

      return next.handle(cloned);
    }
    else {
      return next.handle(req);
    }
  }
}


不过这样的话，token Base64解码也需要自己手写，稍微麻烦一点。
总结
JWT因为是基于JSON的，所以通用性很强，很多语言已经存在jwt相关的库。不过使用JWT的时候需要注意以下几点：

  
保存好secret秘钥，这个秘钥只能在服务端存在
  
给token设置一个过期时间，因为一旦token生成，它就永远有效，除非token密钥被更改或过期
  
在payload中只能存储一些业务逻辑所必要的非敏感信息

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。