如何使用JWT将密钥从前端(角度4)传递到后端(Node js)

Question

我正在学习web应用程序，刚刚开始学习jwt身份验证。

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

但在每个在线教程或youtube教程视频中都提到，我们需要一个签名来创建一个令牌，其中包含一个只有客户端知道的密钥。但在所有的前端教程中，他们发送的是持有者令牌，其中没有显示密钥的使用。

有人能告诉我如何将密钥和令牌一起传递到服务器吗？

Answer 1

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()
  })

在客户端，我们可以使用angular Interceptor在所有与服务器通信的头中设置令牌

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);
      }
    }

并在app.module中注入拦截器作为提供程序