Question

我研究了2天以上找不到解决方案。让我解释一下问题，

我有一个应用程序，其中使用Angular 7实现UI并使用Java Spring后端。

两者都分别部署在不同的域中。可以说Angular应用程序已部署在 ang.ui.com 中，而Java已部署在 java.back.com 中。

所有都是REST Api的，包括Login。 Cookies用于存储 JWT令牌，而不是本地存储。我从双方都包括了CORS配置，并且能够成功登录。

由于两者都是分别部署的，因此Java应用程序在过滤时无法获取JWT Cookie。

请帮助我，我需要采取什么方法。

Answer 1

服务器将无法从前端读取cookie，您必须在发送的每个HTTP请求（最好是在Authorization标头中）发送存储在cookie中的令牌。

执行此操作的一种方法是使用角度拦截器。让我们通过创建一个名为jwt.interceptor.ts

的新文件来创建一个新的拦截器

我们的拦截器类将称为JwtInterceptor，它必须实现Angular HttpInterceptor接口。我们将通过添加@Injectable批注使其成为可注射的。

我们的班级应该像这样：

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
}

现在，我们必须实现intercept方法，该方法将在我们发送的每个http请求中执行。它有一个HttpRequest和一个HttpHandler参数，并返回一个HttpEvent可观察的结果。

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

在此方法中，我们必须从cookie中读取令牌（假设它称为jwtCookie）并添加到Authorization标头的HttpRequest部分中。假设您已经知道如何使用Cookie服务，我将不做介绍。我们使用var token = cookie.get("jwtCookie");检索令牌让我们验证Cookie是否存在：if(token) {} 现在，我们通过克隆请求对象并设置Authorization标头将令牌添加到标头中：

request = request.clone({
      setHeaders: { 
           Authorization: `Bearer ${token}`
      }
});

现在，我们只需要通过调用并返回next.handle(request)来处理请求。

现在我们的班级应该像这样：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> {
    var token = cookie.get("jwtCookie);
    if(token) {
      request = request.clone({
        setHeaders: { 
           Authorization: `Bearer ${token}`
        }
      });
    }
    return next.handle(request);
  }
}

现在我们必须通过编辑app.module.ts文件来注入拦截器首先导入类：import { JwtInterceptor } from './jwt.interceptor';

然后将以下对象添加到providers批注中的@NgModule数组中：

{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }

现在，我们的令牌将被添加到我们的角度应用程序发送的每个请求中，并且我们的JAVA服务器可以读取。

前端和后端分别部署的Cookie的使用（域）

1 个答案: