获取(Set-Cookie)的值存入浏览器angular 8

Question

我是一名网络开发新手，使用 spring boot 和 angular 8。当我尝试使用用户名和密码登录时，服务器会生成一个令牌并将其发送回 http 响应，所以我的问题是如何获取 cookie 的值并将其存储在浏览器中。this is the java code that store the cookie in the header.

this is the response header where the token is.

Answer 1

设置 cookie 需要在服务器端处理，因为您在 HTTP 请求中看到 Set-Cookie header，一切似乎都很好。（您也可以通过导航到 Chrome 开发工具中的 Application 选项卡然后在左侧面板上导航到 select Cookies 来检查它）

通常，出于安全原因，您不应 "get" 来自客户端 (Angular) 应用程序中 cookie 的访问令牌。然而，这取决于您的令牌策略（例如，当您使用刷新令牌获取访问令牌时，可以将访问令牌放入您的 angular 应用程序）

长话短说，您应该查看这篇关于 handling JWTs on frontend clients 的非常全面的文章。它涵盖了您需要知道的一切。

您还可以查看 Ben Awad

的 this great video

简化版是这样的：

用户登录
如果登录有效，服务器将使用 刷新令牌（作为 cookie）和 访问令牌（仅在响应负载）
访问令牌存储在javascript变量（在内存中）或localStorage

客户端现已通过身份验证

用户请求访问需要身份验证的资源。现在客户端将发送 access token 作为 Http header（如果你使用 Angular 你会为此使用 auth token 拦截器）。 刷新令牌 会自动发送到服务器（因为它存储在 cookie 中）。以下是可能发生的情况：
- 访问令牌有效：用户仍然通过身份验证，发送受保护的资源
- 访问令牌无效/过期：使用刷新令牌生成新的访问令牌，发送受保护的资源
- 刷新令牌也无效：用户未通过身份验证

Angular 中 AuthTokenInterceptor 的实现可能如下所示（显然缺少一些代码片段，但它概述了总体思路）：

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

@Injectable()
export class AuthTokenInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // get access token
    const accessToken = this.authService.accessToken;

    // set http header with token
    const setHeaders = { ['Authentication']: `Bearer ${accessToken}` };
    req = req.clone({ setHeaders, withCredentials: true });

    // execute the http request
    return next.handle(req).pipe(
      catchError(async (error) => {
        console.log("error in intercetpor", error);
        // try to refresh the access token if the request fails with a 401 error
        if (
          error instanceof HttpErrorResponse &&
          error.status === 401
        ) {
          const newAccessToken = await this.authService.refreshAccessToken()

          // set http header with new token
          const setNewHeaders = { ['Authentication']: `Bearer ${newAccessToken}` };
          req = req.clone({ setNewHeaders, withCredentials: true });

          return next.handle(req);
        }

        // unexpected error
        return throwError(error);
      })
    );
  }
}

您可以找到我在我的一个项目中使用的有效实现 here。但是总是很难理解外国代码库中发生的事情。因此，我建议按照上面的文章进行操作。（更重要的是理解概念，实现可能因项目而异）

获取(Set-Cookie)的值存入浏览器angular 8

Get the value of (Set-Cookie) and store it in the browser angular 8

web-development-server

setcookie

spring-boot

angular8