node.js - 如何使用 JWT 将 key 从前端( Angular 4)传递到后端( Node js)

Question

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

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

但是在每个在线教程或 YouTube 教程视频中都提到我们需要签名来创建 token ，其中包含只有客户端知道的 key 。但在所有前端教程中，他们都发送不记名 token ，但未显示 secret key 的使用。

有人可以告诉我如何将 key 和 token 一起传递到服务器吗？

Answer 1

好吧，让我们先了解jwt身份验证的过程，首先，一旦用户第一次登录，后端服务器就会在后端生成 key ，后端服务器会检查用户是否存在，并在登录请求的响应中，服务器使用密码和与用户相关的唯一信息(通常是用户ID和 token 过期的时间验证)对 token 进行编码

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

一旦 token 被编码，服务器将其发送到登录请求的响应中，客户端捕获此 token 并将其存储在本地存储中，客户端现在应该使用 token 进行与服务器的任何 future 通信，在每个需要身份验证的http调用中需要身份验证，我们在 header 中发送 token ，以便服务器将检查中间件中的 header 并使用相同的 JWT_SECRT 解码 token 以了解它是否是有效 token

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 拦截器在 header 中设置 token ，以便与服务器进行所有通信

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

并将拦截器作为提供者注入(inject)到 app.module