How do I catch a backend error and not log into the application?

Question

Guys, good night, I researched several topics and tried several solutions and unfortunately I could not adjust the error. I am developing an application with Angular and my Python backend, at the moment I am doing login authentication (no token for now), when sending an HTTP request with username and password to my server it checks if there is registration in the bank and if there should redirect to the route '/Dashboard', but regardless of the username exists in the bank it redirects. Below are lines of code:

My Component:

  userLogin(){
// Pegando os valores do HTML INPUT e jogando nas constantes
    const username = this.loginForm.get('username').value;
    const password = this.loginForm.get('password').value;

    this.authService
        .authenticate(username, password)
    .subscribe(
      () => this.router.navigate(['dashboard']),
            err => {
        console.log(this.loginForm.value)
                console.log(err);
        this.loginForm.reset();
        alert('Erro')
            }
        )
    }

My Service:

  constructor(private http: HttpClient) { }

    authenticate(username: string, password: string) {    
      return this.http.post(API_URL, {"username":username, "password":password})
  }

My backend in python:

class Login(Resource):
    def post(self):
        parser.add_argument('username', type=str)
        parser.add_argument('password', type=str)
        args = parser.parse_args()
        print(args)
        password = hashlib.md5(args['password'].encode('utf-8')).hexdigest()
        sql = "SELECT * FROM usuarios WHERE username = (%s) and password = (%s)"
        value = (args['username'], password)
        dbcursor.execute(sql, value)
        result = dbcursor.fetchall()
        print(result)
        if len(result) > 0:
            return {"message": "user valido"}
        else:
            return {"message": "user invalido"}

In my browser I get the Return if the user is valid or not and even so, whether or not my user is redirected to the Dashboard route

Answer 1

Try trading your subscribe for this one:

.subscribe((res) => {
  if(res.message == 'user valido'){
      this.router.navigate(['dashboard'])
  }}
  ,(err: HttpErrorResponse) => {

      alert('erro');
}

Answer 2

Guys, I got it this way, but I don’t know if it’s the right way:

 this.authService
    .authenticate(username, password)
.subscribe((res) => {
  if(res ["message"] == 'user valido') {
    this.router.navigate(['dashboard'])
  }
  else {
    console.log('user invalido')

}

Answer 3

The best would be your backend return 501 which is the default for unauthorized and you handle the catch error as you had done.