.Net Core 2.1 and Angular 6 Cookies

2019-08-29 13:40发布

问题:

I have a little private Project and now I'm hanging with cookies.

First of all I want to show you some code:

UserServiceControler.cs

[HttpPost("IsAuthenticated")]
public IActionResult IsAuthenticated([FromBody] IsAuthenticatedRequest request) {
 var hash = _userService.IsAuthenticated(HttpContext, request);
 switch (hash) {
  case "200":
  case "401":
     return new StatusCodeResult(Convert.ToInt32(hash));
  default:
     if (HttpContext.Request.Cookies.Contains("TEST")) {
        HttpContext.Response.Cookies.Delete("TEST");
     }
     HttpContext.Response.Cookies.Append("Test", hash, new CookieOptions() {
         HttpOnly = true,
         Secure = true,
         IsEssential = true,
         Domain = "localhost",
         Expires = new DateTimeOffset(DateTime.Now).AddMinutes(20.0)
    });
    return new StatusCodeResult(200);
 }
}

Proxy.conf.json

{
  "/api/*": {
    "target": "https://localhost:5001",
    "secure": false,
    "topLevel": "debug",
    "changeOrigin": true
  },
  "/login.html": {
    "target": "http://localhost:4200/assets/pages",
    "secure": false
  }, 
  "/": {
    "target": "http://localhost:4200",
    "secure": false
  }
}

login.html just function

var paramString = "{username: \"test\", password: \"test\"}";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    window.location.href = "/";
  } else if (this.status == 401) {
    alert("1");
  }
};
xhttp.open("POST", "/api/UserService/IsAuthenticated", true);
xhttp.withCredentials = true;
xhttp.setRequestHeader("Content-type", "application/json-patch+json");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
xhttp.send(paramString);

When I test my IsAuthenticated via Swagger, I get my cookie with all I want. But when I want to use this in my Angular app, i don't get my cookie.

How does it works: Normally when I call /api/UserService/IsAuthenticated, in swagger, and give him a username and a password it sets the cookie in my browser. This makes my happy because this shows me that my api is not the problem. Now it comes to Angular. I start my app via npm start and this makes that ng serve --proxy-config proxy.conf.json nothing special. In my index.html is the same code as in login.html just with test username and password because it looks at the cookie in my api. So I go to localhost:4200. First it should redirect me to localhost:4200/login.html because I'm not logged in. This works. Now in login.html I give him my username and my password --> wait some ms --> and i get StatusCode 200 and in my Brower Console at network i see my request with a response cookie. But it isn't set in my browser. This is not good. That I get redirected to localhost:4200 because StatusCode is 200 and at index.html he checks again if i'm Authenticated and I get redirected back to localhost:4200/login.html because of cookie is not there.

Can anyone help me please with this cookie problem? Or is there a better way how I can make this user session?