时间戳

首页 > 解决方案 > 前端和后端分开部署的 Cookie 的使用（域）

java - 前端和后端分开部署的 Cookie 的使用（域）

问题描述

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

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

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

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

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

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

标签： javaangularspringjwt

解决方案

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

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

我们的拦截器类将被调用JwtInterceptor，它必须实现 AngularHttpInterceptor接口。@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 }

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

推荐阅读