Reactjs 同时对Asp.NETCore2.0MVC应用程序（cookie）和RESTAPI（JWT）进行身份验证

我使用的是VS 2017 Asp.Net Core 2.0 web应用程序模板，带有React.js模板选项

这为我提供了基本的MVC+React设置，包括： 1.承载React应用程序的单个MVC页面 2.React应用程序的ClientApp文件夹 3.React应用程序与之对话的Rest API

默认情况下，这些都没有经过身份验证。我想保护MVC页面和RESTAPI

我修改了代码，以便对MVC页面使用cookie身份验证，对RESTAPI使用JWT承载身份验证

对于MVC cookie身份验证，我有一个MVC登录表单。这个很好用

对于RESTAPI身份验证，我添加了一个TokensController，它接收用户名和登录名，并生成一个JWT令牌，用于对RESTAPI的请求。当从Postman测试时，这也可以很好地工作：如果用户尝试在没有有效JWT令牌的情况下访问RESTAPI，则用户将得到401响应。若用户从TokensController获取令牌并使用该令牌访问RESTAPI，那个么用户将得到200个响应

我的问题是将这两者结合起来。我想要的是，当一个未经验证的用户来到我的MVC页面时，用户被重定向到一个登录表单。提交表单时，用户将通过MVC应用程序（获取cookie）和RESTAPI（获取JWT令牌）的身份验证

我试图实现这一点，这样就不用使用MVC登录页面，而是使用React登录组件，未经验证的用户将被重定向到该组件。在提交React登录表单时，在React onSubmit事件中，我将首先调用TokensController获取JWT令牌，将该令牌存储在浏览器localStorage中，然后将表单提交给MVC控制器以进行cookie登录

我无法使MVC重定向到我的React登录组件。可能是客户端和服务器端的路由问题，我不太明白

在routes.tsx中，我将React登录组件设置为此路由：

在Startup.cs中，我有以下内容：

public void配置服务（IServiceCollection服务）
{
services.AddAuthentication（CookieAuthenticationDefaults.AuthenticationScheme）
//承载React应用程序的MVC页面的Cookie身份验证
.AddCookie（选项=>
{
options.LoginPath=新路径字符串（“/Account/Login”）；
options.LogoutPath=新路径字符串（“/Account/Logout”）；
options.Cookie=新的CookieBuilder
{
HttpOnly=true，
Name=“OurCookieAuthentication”，
Path=“/”，
SameSite=SameSiteMode.Lax，
SecurePolicy=CookieSecurePolicy.SameAsRequest
};
options.ExpireTimeSpan=TimeSpan.FromMinutes（30）；
options.SlidingExpiration=true；
}
)
//React应用程序调用的REST API的JWT authenticaton
.AddJwtBearer（JwtBearerDefaults.AuthenticationScheme，选项=>{
options.TokenValidationParameters=新的TokenValidationParameters
{
ValidateAudience=false，
validateisuer=false，
ValidateSuersigningKey=true，
IssuerSigningKey=新的SymmetricSecurityKey（Encoding.UTF8.GetBytes（“thesecret”），
ValidateLifetime=true，
ClockSkew=时间跨度从分钟（5）
};
});
;
services.AddMvc（）
}

上面，这当前指向我的MVC登录页面，该页面对cookie登录很好，但不处理JWT：

options.LoginPath=新路径字符串（“/Account/Login”）；

如果我将其更改为此以尝试重定向到我的React登录组件，它将不起作用（我的React组件未加载，可能是因为请求转到服务器MVC控制器上的“/login”路径，而不是我的客户端React组件）：

options.LoginPath=新路径字符串（“/login”）；

---

关于如何才能最好地实现我所追求的目标，您是否尝试过将react视图添加到MVC AccountController中，如下所示：

public IActionResult Login()
{
    return View("../Home/Index"); //this should be the cshtml view that serves up the spa
}

然后在react routes中，将登录路径更改为：

    <Route path='/Account/Login' component={Login} />

您的React页面是与ASP核心项目捆绑在一起还是单独运行？也就是说，项目在localhost:8080下运行，react项目在localhost:8088I下运行。我使用的是VS 2017 Asp.Net核心react模板，因此REST API、MVC主机页和react应用程序都在同一VS项目中，并且在同一http端口上。React应用程序及其MVC主机页位于根目录下，REST API位于相同的端口上。一旦我有了基本的工作，我将移动RESTAPI到单独的VS项目，以便于维护。