通过Angular 2登录表单向JWT令牌控制器传递用户名和密码

Question

我有一个angular 2登录表单，我正试图通过API调用来调用一个JWT令牌控制器。

我的user.service.ts如下：-

login(username, password) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  let credentials = JSON.stringify({ username, password });
  console.log(username, password);
  return this._http.post('http://localhost:5000/api/jwt', credentials, { headers: headers })
    .map(res => res.json())
    .map((res) => {
      if (res.success) {
        localStorage.setItem('auth_token', res.auth_token);
        this.loggedIn = true;
      }

      return res.success;
    });
}

当我做console.log（用户名，密码）；我正在得到正确的用户名和密码输入的表单。

      [HttpPost]
  [AllowAnonymous]
  public async Task<IActionResult> Get(string username, string password)
  {

  //code here

  }

约翰

Answer 1

您设置了一个错误的内容类型头,它必须是JSON：

headers.append('Content-Type', 'application/json');

还要确保创建了一个有效的JSON对象(JSON.stringify（{username,password}）无效，并且控制台收到一个javascript错误，表示该对象已中断）：

let credentials = JSON.stringify({ username: username, password: password });

最后但并非最不重要的是引入一个视图模型来匹配这个结构：

public class LoginViewModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

您的控制器操作将作为参数：

public async Task<IActionResult> Get(LoginViewModel loginModel)