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

Posted 2023-02-27

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

【英文标题】：How to show "Login In failed.Please try again" message in angular when Api returns the response?

【发布时间】：2019-04-05 08:22:14

【问题描述】：

实际上我有一个简单的登录屏幕，角度为：

当输入用户名和密码时，它成功点击/login url，如果正确，它会转到 userdashboard 或 admindashboard，当用户名和密码不正确时，它会显示 /403 fobidden 页面。

控制台的输出如下：

实际上我想显示“登录失败，请输入正确的用户名和密码信息”，但 api 以表单返回响应

@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());

         

如果登录成功，则返回用户对象，既不返回消息“Bad Credintials”。

在我的角度中，我尝试检查错误情况并希望应用消息策略，但如果登录失败，它不会在 console.log() 中打印，但如果登录成功，则在控制台中打印响应.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);
    

【问题讨论】：

为什么要在 request 中添加 Access-Control-Allow-Origin 标头？

【参考方案1】：

你得到的响应进入前端的错误块，因此将布尔变量声明为 showErrormessage 为 false 并在 html 中编写以下代码

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

然后在 ts 文件中写这个

//声明这个变量 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;

)

【参考方案2】：

您需要捕获可观察对象的错误。 Observe 最多需要 3 个函数，第一个处理好数据，第二个处理错误，第三个是最终调用，例如

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

所以你需要添加一个错误处理程序来捕捉你所说的条件。

参考：https://angular.io/guide/observables

【参考方案3】：

在这种情况下，您将在 observable 的错误函数中得到响应。所以，只要抓住错误。

这里我更新了代码。

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. 
    )

  

【参考方案4】：

在 subscribe 中传递第二个函数以捕获错误。

  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);
      
    )