当Api返回响应时，如何以角度显示“登录失败。请重试”消息？

Question

Actually i have simple login screen in angular as:

When the username and password is entered,it successfully hit the /login url and if it is correct it goes to the userdashboard or admindashboard and when username and password is incorrect it shows me /403 fobidden page.

The output in console comes like :

Actually i want to show "Login Failed Please enter correct Username and Passowrd Message" but the api is returning the response in the form

@PostMapping(value="/login")
    public ResponseEntity<UserDTO> login(@RequestBody User user,HttpServletRequest request,HttpServletResponse response){
        try {
            Authentication authentication= authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(user.getEmail(), user.getPassword()));
            final JwtUser userDetails=(JwtUser) authentication.getPrincipal();
            System.out.println(userDetails.getAuthorities());
            SecurityContextHolder.getContext().setAuthentication(authentication);
            final String token=jwtTokenUtil.generateToken(userDetails);
            response.setHeader("Token",token);
            return new ResponseEntity<UserDTO>(new UserDTO(userDetails.getUser(), token),HttpStatus.OK);
            }catch(Exception e) {
            throw new UnauthorizedExcpetion(e.getMessage());

        } 

If login is success it returns user object neither it returns the message "Bad Credintials".

And in my angular I have tried to check the error condition and want to apply the message strategy but it is not printing in console.log() if the login is failed but if the login is success then response is printed in console.log().

loginUser(user:any){
    this.userService.loginUser(user).subscribe((response) => {
      console.log("test");
        if(response){
        console.log(response.token);
            if(response.token){
                localStorage.setItem('currentUser',JSON.stringify(response));
                if(response.user.role==='ADMIN'){
                    this.router.navigate(['/admindashboard']);
                }else{
                    this.router.navigate(['/userdashboard']);
                }
            }
         else{
        console.log(response.error.message);
      }

        } 



    })

  }

userservice.ts

loginUser(user:any):Observable<any>{
         const headers=new HttpHeaders({'Access-Control-Allow-Origin':'*'});
         return this.http.post("http://localhost:8080/login",user,{headers:headers});
   } 

Answer 1

The response that ur getting goes into the error block in the front end so declare a boolean varaible as showErrormessage as false and write the following code in html

  <div *ngIf="showErrorMessage">
    <h1>Invalid username and password Please try again</h1>
  </div>

And in ts file write this

//Declare this variable showErrorMessage=false;

loginUser(user:any){
  showErrorMessage = false;
  this.userService.loginUser(user).subscribe(
      (response) => {

      console.log("test");
          if (response) {
              console.log(response.token);
          if (response.token) {
              localStorage.setItem('currentUser', JSON.stringify(response));
          if (response.user.role === 'ADMIN') {
              this.router.navigate(['/admindashboard']);
      }   else {
              this.router.navigate(['/userdashboard']);
      }
    } else {
      console.log("No Token");
    }
  }
},
(error) => {
  showErrorMessage = true;
}

) }

Answer 2

You need to catch the error of the observable. Observe takes up to 3 functions, the first handles good data, the second handles errors and the third is a final call eg

let subscription = this.data.subscribe(
          (value) => { /* Do something with value */ },
          (error) => { /* Do something with error */ },
          () => { /* Do something with done*/ }
      );

So you need to add an error handler to catch the condition you are talking about.

Reference: https://angular.io/guide/observables

Answer 3

In this case, you will get your response in the error function of observable. So, just catch the error.

Here I have updated the code.

loginUser(user:any){
    this.userService.loginUser(user).subscribe((response) => {
      console.log("test");
        if(response){
        console.log(response.token);
            if(response.token){
                localStorage.setItem('currentUser',JSON.stringify(response));
                if(response.user.role==='ADMIN'){
                    this.router.navigate(['/admindashboard']);
                }else{
                    this.router.navigate(['/userdashboard']);
                }
            }
         else{
        console.log(response.error.message);
      }   
        }            
    }, (error) => {
        console.log('Login Failed'); // handle login failed here. 
    })

  }

Answer 4

Pass a second function in subscribe to catch the error.

  loginUser(user:any){
    this.userService.loginUser(user).subscribe(
      (response) => {
      console.log("test");
        if(response){
        console.log(response.token);
            if(response.token){
                localStorage.setItem('currentUser',JSON.stringify(response));
                if(response.user.role==='ADMIN'){
                    this.router.navigate(['/admindashboard']);
                }else{
                    this.router.navigate(['/userdashboard']);
                }
            }else{
              console.log("No Token");
            }
        } 
      },
      (error)=>{
        console.log(error.message);
      }
    )
  }