如何正确发送发帖请求

时间:2019-08-13 13:53:59

标签: node.js angular angular-httpclient

我正在使用Nodejs中的restAPI在Angular中建立一个Web应用程序,但是我无法正确设置我的发布请求以验证用户身份

我已经设置好了api,并且可以使用curl正确地对其进行测试,但是在客户端(角度),它无法通过验证所需字段是否存在的条件

API中的

函数:

exports.authenticate = function(req, res) {
  var new_user = new User(req.body);
  if (!new_user.login || !new_user.pwd) {
    res.status(400).send({
      error: true,
      message: 'Please provide all informations!'
    });
  } else {
    User.authenticate(new_user, function(err, user) {
      console.log('controller');
      if (err) {
        res.status(500).send(err);
      } else {
        console.log(user[0].id);
        var token = jwt.sign({
          id: user[0].id
        }, config.secret, {
          expiresIn: 3600
        });
        res.status(200).send({
          user: user,
          auth: true,
          token: token
        });
      }
    });
  }
}

User.authenticate调用我的SQL查询:

sql.query("SELECT * FROM user WHERE login = ?", [user.login], function(err, res) {
  if (err) {
    return res.status(500).send('Error  on the server ', err);
    //console.log("error select: ", err);
  } else {
    if (!res) {
      return res.status(404).send('No user found');
    } else {

      //sql.query("UPDATE user SET pwd = ? WHERE id = ?", [crypto.createHash('sha256').update(user.
      sql.query("SELECT * FROM user WHERE pwd = ?", [crypto.createHash('sha256').update(user.pwd + r
        if (err) {
          console.log("error: ", err);
          result(null, err);
        } else {


          result(null, res2);
        }
      });
    }
  }
});

角度(我的服务功能):

login(loguser: User) {
       return this.http.post<any>(`${environment.apiUrl}/authenticate`,
               { loguser }, { headers: new HttpHeaders().set('Content-Type', 'application/json')})

                       .pipe(map(user => {
                               // store user details and jwt token in local storage to keep user logged in between p
                               localStorage.setItem('currentUser', JSON.stringify(user));
                               this.currentUserSubject.next(user);
                               return user;
               }));
       }

登录组件:

onSubmit() {
  this.submitted = true;
  // stop here if form is invalid
  if (this.loginForm.invalid) {
    return;
  }

  this.loading = true;
  this.user.login = this.f.username.value;
  this.user.pwd = this.f.password.value;
  console.log(this.user);
  this.authenticationService.login(this.user)
    .pipe(first())
    .subscribe(
      data => {
        this.router.navigate([this.returnUrl]);
      },
      error => {
        this.error = error;
        this.loading = false;
     });
   }

console.log(this.user)输出:{login: "cl", pwd: "cl"}

我的发布请求在我的api的这一部分被阻止了:

if (!new_user.login || !new_user.pwd){
  res.status(400).send({ error: true, message: 'Please provide all informations!' });

因为这是我提交表单时得到的答案。

像这样测试时,我可以得到正确的答案:

curl -v -X POST --data '{"login":"cl","pwd":"cl"}' --header "Content-Type: application/json" https://@api:8443/autenticate

我想得到一个好的答案。

1 个答案:

答案 0 :(得分:0)

问题出在您的Angular代码中

login(loguser: User) {
  return this.http.post<any>(`${environment.apiUrl}/authenticate`, 
    { loguser }, 
    {
      headers: new HttpHeaders().set('Content-Type', 'application/json')
    })
    .pipe(map(user => {
      // store user details and jwt token in local storage to keep user logged in between p
      localStorage.setItem('currentUser', JSON.stringify(user));
      this.currentUserSubject.next(user);
      return user;
    }));
}

这段代码:

{ loguser }

使用TypeScript和ECMAScript 2015中引入的“快捷方式属性名称”语法创建一个对象,该对象具有名为loguser的单个属性,该属性的值为loguser。相当于写作:

{ loguser: loguser }

相反,您可以只在代码中传递变量本身:

login(loguser: User) {
  return this.http.post<any>(`${environment.apiUrl}/authenticate`, 
    loguser, // Just the object itself
    {
      headers: new HttpHeaders().set('Content-Type', 'application/json')
    })
    .pipe(map(user => {
      // store user details and jwt token in local storage to keep user logged in between p
      localStorage.setItem('currentUser', JSON.stringify(user));
      this.currentUserSubject.next(user);
      return user;
    }));
}

这将传递对象,并保留loginpwd属性。