angular - 将 cookie 添加到 Angular 中的请求并将其设置在 .NET Core 5 的背面

问题描述

我在我的应用程序 Angular 拦截器中设置了标题。

const clonedReq = req.clone({
            headers: req.headers
            .set('Authorization', 'Bearer ' + localStorage.getItem('accessToken')),
            withCredentials: true,
        });

如您所见，我设置withCredentials: true了，但在请求中看不到任何 cookie

我的 cokies 在浏览器中看起来像这样

如果我不能在正面这样做，为什么我不能在背面设置 cookie。我是这样做的。首次启动

services.AddCors(options =>
        {
            options.AddPolicy("AllowAll", p =>
            {
                p.SetIsOriginAllowed(_ => true)
                .AllowAnyHeader()
                .AllowCredentials()
                .AllowAnyMethod();
            });
        });

并在配置app.UseCors("AllowAll");

比在我的控制器中返回 Ok();

Response.Cookies.Append("key", "value", new CookieOptions()
        {
            Path = "/",
        });

当我的 .NET Core 应用程序与 Angular 一起使用时，它已经工作了。但是当我分开两个项目时，我无法管理双方的 cookie。如何将 cookie 添加到请求并将其设置在后端？

标签： angular.net-corecookies

解决方案

我有一个类似的实现并且工作正常，我希望我的代码对你拦截器有帮助：

export class TokenInterceptor implements HttpInterceptor {

  constructor(private jwtAuth: JwtAuthService) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    var token = this.jwtAuth.token || this.jwtAuth.getJwtToken();

    var changedReq;

    if (token) {

      changedReq = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        },
      });

    } else {

      changedReq = req;
      
    }
    return next.handle(changedReq);
  }
}

在 dotnet 控制器中

[HttpPost("login")]
        public async Task<IActionResult> Login(UserForLoginDto UserForLoginDto)
        {
            var userFromRepo = await _repo.Login(UserForLoginDto.Username.ToLower(), UserForLoginDto.Password);

            if (userFromRepo == null)
                return Unauthorized();

            var claims = new[] {
                    new Claim(ClaimTypes.NameIdentifier, userFromRepo.Id.ToString()),
                    new Claim(ClaimTypes.Name, userFromRepo.Username)
                };

            var key = new SymmetricSecurityKey(Encoding.UTF8
            .GetBytes(_config.GetSection("AppSettings:Token").Value));

            var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha512Signature);

            var tokenDescriptor = new SecurityTokenDescriptor
            {
                Subject = new ClaimsIdentity(claims),
                Expires = DateTime.Now.AddDays(1),
                SigningCredentials = creds
            };

            var tokenHandler = new JwtSecurityTokenHandler();

            var token = tokenHandler.CreateToken(tokenDescriptor);
            var permissionList = GetCurrentRolPermission(UserForLoginDto.Username);
            return Ok(new
            {
                token = tokenHandler.WriteToken(token),
                permissionList = permissionList
            });
        }

我没有在后端设置 cookie 我返回一个带有 2 个属性的 json 的 OK，然后我使用该属性以角度保存 localStorage 上的凭据

angular - 将 cookie 添加到 Angular 中的请求并将其设置在 .NET Core 5 的背面

问题描述

解决方案

推荐阅读