通过Angular 2登录表单将用户名和密码传递给JWT令牌控制器-Java 学习之路

我有一个有角度的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

  }

我的问题是用户名和密码始终为空 .

我曾尝试使用用户名和密码在Postman上发布'http://localhost:5000/api/jwt'的帖子，它运行正常 .

如何从Angular 2表单中将用户名和密码传递给控制器？

谢谢你的帮助和时间

约翰

1 回答

0
您设置了错误的Content-Type标头，它必须是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)
```
回复于 2024-04-19T16:19:34+08:00

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

1 回答

相关问题