页面刷新时 JWT Token 已从标题中删除，如何修复？

Posted 2023-03-10

【中文标题】页面刷新时 JWT Token 已从标题中删除，如何修复？

【英文标题】：JWT Token was removed from header when page refreshed, How can fix it?

【发布时间】：2020-01-01 09:18:51

【问题描述】：

我正在使用基于 Jwt 令牌的身份验证并使用 Angular 7 和 node.js，我想使用令牌向服务器发送 POST 请求，一切正常，但是当我重新加载页面时出现此错误服务器端：

我在中间件中有这个 node.js 代码：

router.all('/*', function (req, res, next) 

    let tok = '';
    tok =  req.headers["authorization"].split(' ')[1] ||  req.headers["authorization"];

    jwt.verify(tok, secureKeyToken, (err, token) => 
        if (err) return console.log('NO TOKEN! VERIFY');
        res.locals.token  = token;
        next();
    );
);

我在 Angular 中有这段代码：

httpOptions = 
  headers: new HttpHeaders(
    "authorization": this._token.tokenGetter() || ''
  )
;


reloadVorlage(id)

  let endpoint = this.HOST_TURL + '/vorlag/go' // get one

  return this.httpClient.post(endpoint, id,this.httpOptions)
  .pipe(catchError(this.errorHandler));

问题是，为什么我重新加载页面时令牌会消失？以及如何解决？

我的英语很差，见谅。

【参考方案1】：

为了让 JWT 在页面刷新后可用，您必须将其存储在客户端。您可以使用浏览器 localStorage 或 cookie。我是这个链接会帮助你https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

【参考方案2】：

您必须将 jwt 令牌存储在本地存储（客户端）中。因此，当您登录时，您会在 api 中生成令牌并将其发送到 Angular 应用程序。 在您的 Angular 应用程序中，您将收到令牌，因此您可以将其放在本地存储中：

localStorage.setItem("token", receivedToken);

然后，您可以添加一个 HttpInterceptor 来拦截您的所有请求，并自动在授权标头中添加令牌。

拦截器类似于：

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

    request = request.clone(
      setHeaders: 
        Authorization: `Bearer $this.auth.getToken()`
      
    );
    return next.handle(request);
  

这里有一个指南：https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

如果您不将令牌存储在客户端，则重新加载页面后将无法保留。