Reactjs 如何从ASP.net Web API向react js发送令牌？

我想使用web api在react js中实现JWT身份验证

我已经在WebAPI中创建了JWT身份验证

当我测试它时，它在邮递员身上运行得非常好

当我将它与react js一起使用时，API正在被命中

现在的问题是如何将令牌发送到react js，以及如何在react js中获取令牌

function login(username, password) {
    return fetch(`${API_URL}/Login`, {username, passowrd})
        .then(response => {
            debugger;
            if (!response.ok) {
                return response;
            }

            return response.json();
        })
        .then(user => {
            debugger;
            // login successful if there's a jwt token in the response
            if (user && user.token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('user', JSON.stringify(user));
            }

            return user;
        });
}

这是我在web api中的登录控制器

using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Security.Claims;
using System.Web;
using System.Web.Http;
using System.Web.Http.Cors;
using WEBAPI_JWT_Authentication.Models;


namespace WEBAPI_JWT_Authentication.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class LoginController : ApiController
    {
        [HttpPost]
        public IHttpActionResult Authenticate([FromBody] LoginRequest login)
        {
            var loginResponse = new LoginResponse { };
            LoginRequest loginrequest = new LoginRequest { };
            loginrequest.Username = login.Username.ToLower();
            loginrequest.Password = login.Password;

            IHttpActionResult response;
            HttpResponseMessage responseMsg = new HttpResponseMessage();
            bool isUsernamePasswordValid = false;       

            if(login != null)
            isUsernamePasswordValid=loginrequest.Password=="test" ? true:false;
            // if credentials are valid
            if (isUsernamePasswordValid)
            {
                string token = createToken(loginrequest.Username);
                var responseJSON = token;
                //return the token
                return Ok(responseJSON);
            }
            else
            {
                // if credentials are not valid send unauthorized status code in response
                loginResponse.responseMsg.StatusCode = HttpStatusCode.Unauthorized;
                response = ResponseMessage(loginResponse.responseMsg);
                return response;
            }
        }

        private string createToken(string username)
        {
            //Set issued at date
            DateTime issuedAt = DateTime.UtcNow;
            //set the time when it expires
            DateTime expires = DateTime.UtcNow.AddDays(7);

            //http://stackoverflow.com/questions/18223868/how-to-encrypt-jwt-security-token
            var tokenHandler = new JwtSecurityTokenHandler();

            //create a identity and add claims to the user which we want to log in
            ClaimsIdentity claimsIdentity = new ClaimsIdentity(new[]
            {
                new Claim(ClaimTypes.Name, username)                
            });

            const string sec = "401b09eab3c013d4ca54922bb802bec8fd5318192b0a75f201d8b3727429090fb337591abd3e44453b954555b7a0812e1081c39b740293f765eae731f5a65ed1";
            var now = DateTime.UtcNow;
            var securityKey = new Microsoft.IdentityModel.Tokens.SymmetricSecurityKey(System.Text.Encoding.Default.GetBytes(sec));
            var signingCredentials = new Microsoft.IdentityModel.Tokens.SigningCredentials(securityKey,Microsoft.IdentityModel.Tokens.SecurityAlgorithms.HmacSha256Signature);


            //create the jwt
            var token =
                (JwtSecurityToken)
                    tokenHandler.CreateJwtSecurityToken(issuer:"http://localhost:50191",audience:"http://localhost:50191",
                        subject: claimsIdentity, notBefore: issuedAt, expires: expires, signingCredentials: signingCredentials);
            var tokenString = tokenHandler.WriteToken(token);

            return tokenString;
        }
    }
}

这就是我在react js中获取令牌的地方

function login(username, password) {
    return fetch(`${API_URL}/Login`, {username, passowrd})
        .then(response => {
            debugger;
            if (!response.ok) {
                return response;
            }

            return response.json();
        })
        .then(user => {
            debugger;
            // login successful if there's a jwt token in the response
            if (user && user.token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('user', JSON.stringify(user));
            }

            return user;
        });
}

---

如果有人知道如何向react js发送令牌以及如何在react js中获取该令牌，请告诉我。我的方法是创建一个响应类

根据您的需要，您希望在此类中定义什么，对于我的案例，状态和消息用于将进度状态更新到前端

您将令牌字典存储在类响应中，并将其返回给函数。让我们说：

[HttpPost]
        public IHttpActionResult Authenticate([FromBody] LoginRequest login)
        {
            var loginResponse = new LoginResponse { };
            LoginRequest loginrequest = new LoginRequest { };
            loginrequest.Username = login.Username.ToLower();
            loginrequest.Password = login.Password;
        IHttpActionResult response;
        HttpResponseMessage responseMsg = new HttpResponseMessage();
        bool isUsernamePasswordValid = false;       

        if(login != null)
        isUsernamePasswordValid=loginrequest.Password=="test" ? true:false;
        // if credentials are valid
        if (isUsernamePasswordValid)
        {
            string token = createToken(loginrequest.Username);
            Response Resp = new Response
            {
                Status = "Success",
                Message = "User Login Successfully Change the Status Message here",
                Token = tokenDictonary, //where you return token
            };
            return 
        }
        else
        {
            // if credentials are not valid send unauthorized status code in response
            loginResponse.responseMsg.StatusCode = HttpStatusCode.Unauthorized;
            response = ResponseMessage(loginResponse.responseMsg);
            return response;
        }
    }

在前端，获取api。 我向您展示axios示例

然后，您就可以通过getItem和setItem检查本地存储，我相信您知道如何执行以下步骤

---

实际上，您创建令牌的方式与我的不同，我有点遵循这一点

我认为您的问题在于您没有使用fetch执行HTTP post。您需要在fetch选项中添加方法：'POST'

axios.post('http://yoururl', {
      Token: this.state.Token,
    })
      .then(result => {
        if (result.data.Status === 'Success') {
          localStorage.setItem('Nameyourvariablehere', result.data.Token.tokentype);
// generate more if your token has more field