前端和后端分别部署（域）的 Cookie 的使用 [关闭]

Question

我研究了2天多没有找到解决办法。让我解释一下问题，

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

它们都分别部署在不同的域中。假设 Angular 应用部署在 ang.ui.com 中，Java 部署在 java.back.com 中。

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

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

请帮助我我需要遵循什么方法。

Answer 1

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

一种方法是使用 Angular 拦截器。 让我们通过创建一个名为jwt.interceptor.ts的新文件来创建一个新的拦截器

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

我们的类应该是这样的：

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
}

现在我们必须实现intercept 方法，我们发送的每个http 请求都会执行该方法。它有一个HttpRequest 和一个HttpHandler 参数，它返回一个HttpEvent observable。

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

在此方法中，我们必须从 cookie 中读取令牌（假设它称为 jwtCookie）并添加到 HttpRequest 标头的 Authorization 部分。 假设您已经知道如何使用 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';

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

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

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