如何使用JWT从前端(Angular 4)将密钥传递到后端(node js)

时间:2018-06-25 04:10:10

标签: node.js angular authentication jwt angular2-jwt

我正在学习Web应用程序,只是从jwt身份验证开始。

我了解一般流程。后端如何创建jwt令牌,以及前端如何检索在每个后续请求中传递的令牌。

但是在每个在线教程或youtube教程视频中都提到,我们需要签名来创建令牌,该令牌包含仅客户端知道的秘密密钥。但是在所有的前端教程中,他们都在不显示使用秘密密钥的情况下发送承载令牌。

有人可以告诉我如何将密钥和令牌一起传递给服务器吗?

1 个答案:

答案 0 :(得分:0)

okey首先让我们了解jwt身份验证的过程,首先,一旦用户首次登录后端服务器,检查该用户是否存在,并在响应登录请求时,该服务器首先在后端中生成密钥。使用秘密字和与用户相关的唯一信息对令牌进行编码,通常是用户ID和令牌过期时的时间验证

 const payload = {
      sub: user.id,
      exp: moment().add(EXPIRATION_DAYS_NUMBER, CONSTANTS.TIME_UNITY).unix()
    }
    let token = jwt.encode(payload, CONSTANTS.JWT_SECRET)

在令牌被编码后,服务器会在登录请求的响应中将其发送给客户端,客户端将抓取此令牌并将其存储在本地存储中,客户端现在应将令牌用于以后与每个服务器中需要认证的服务器进行任何通信需要身份验证的http调用我们在标头中发送令牌,因此服务器将在中间件中检查标头,并使用相同的JWT_SECRT对该令牌进行解码,以了解它是否为有效令牌

middelware(req,res,next)
 let token = req.headers.authorization
  let payload = jwt.decode(token, CONSTANTS.JWT_SECRET)
  user.findOne({ id: payload.sub }).exec((err, user) => {
    if (err) return res.forbidden('not authorized')
    next()
  })

在客户端,我们可以使用角度拦截器在标头中设置令牌,以与服务器进行所有通信

import { Injectable } from '@angular/core';
    import {
      HttpRequest,
      HttpHandler,
      HttpEvent,
      HttpInterceptor
    } from '@angular/common/http';
    import { Observable } from 'rxjs/Observable';
    @Injectable()
    export class TokenInterceptor implements HttpInterceptor {
      constructor( {}
      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
          setHeaders: {
            Authorization: `Bearer localstorage.getItem(token)}`
          }
        });
        return next.handle(request);
      }
    }

并将Interceptor作为提供程序注入app.module