尝试从客户端登录到后端时出现 401 UNAUTHORIZED 状态 flask api

Question

I am trying to login from my website developed in Angular to the back end flask API, The backend uses bcrypt for encoding and pymongo for interacting with a MongoDB. In postman, the login endpoint works fine but when an attempt to log in on the client side is made I receive a 401: UNAUTHORIZED ERROR. Can someone advise what the issue is/where I am going wrong?

The login function on the client side:

onLogin() {
  let postData = new FormData();
  postData.append('username', this.loginForm.get('username').value);
  postData.append('password', this.loginForm.get('password').value);

  this.http.post('http://localhost:5000/api/v1.0/login', postData)
  .subscribe((_response: any) => {

  console.log(this.loginForm.value);
  this.loginForm.reset();
})
}

The login endpoint in backend:

app = Flask(__name__)
CORS(app)

@app.route('/api/v1.0/login', methods=['POST'])
def login():

auth = request.authorization

if auth:
    user = users.find_one({'username': auth.username})
    if user is not None:
        if bcrypt.checkpw(bytes(auth.password, 'utf-8'),
                      user["password"]):  
            token = jwt.encode( \
                {'user' : auth.username,
                 'admin': user["admin"],
                'exp' : datetime.datetime.utcnow() + \
                datetime.timedelta(minutes=30)
             }, app.config['SECRET_KEY'])
        return make_response(jsonify( \
            {'token':token.decode('UTF-8')}), 200)
    else:
        return make_response(jsonify( \
            {'message':'Bad password'}), 401)
else:
    return make_response(jsonify( \
    {'message':'Bad username'}), 401)

Answer 1

In order to use request.authorization you need to send the credentials in the Authorization-header. Try this on the client:

onLogin() {
  const usn = this.loginForm.get('username').value;
  const pwd = this.loginForm.get('password').value;

  this.http.post('http://localhost:5000/api/v1.0/login', null, {
    headers: new HttpHeaders({
      Authorization: `Basic ${btoa(`${usn}:${pwd}`)}`
    })
  }).subscribe((_response: any) => {
    console.log(_response);
  });
}

As a sidenote; the credentials can be easily decoded by using atob() , so make sure you are using a secure connection (HTTPS) when not on localhost.