[Spring Security + Vue.js] 로그인 실패시 failureHandler로 처리, 실패 이유 띄우기

successHandler로 처리해주어 로그인 성공시에는 홈페이지로 이동한다.

만약 아이디어나 비밀번호를 잘못 입력해 로그인에 실패한다면 어떻게 될까?

 

실패 처리를 따로 해주지 않고 콘솔을 찍어보았다.

 GET http://127.0.0.1:5173/login?error 404 (Not Found)

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code : "ERR_BAD_REQUEST"
config : {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message : "Request failed with status code 404"
name : "AxiosError"

 

 

/config/security/SecurityConfig.java

http.formLogin()에 failureHandler를추가해준다.

http.formLogin()
        .loginPage("/login")
        .successHandler(authSuccessHandler)
        .failureHandler(authFailureHandler);

 

 

/config/security/auth/AuthFailureHandler.java

errorMessage에 에러 메세지를 담아서 setDefaultFailureUrl() 메소드로 실패시 url을 지정해준다..

@Configuration
public class AuthFailureHandler extends SimpleUrlAuthenticationFailureHandler {

    @Override
    public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response,
            AuthenticationException exception) throws IOException, ServletException {

        String errorMessage = null;

        if (exception instanceof BadCredentialsException) {
            errorMessage = "아이디와 비밀번호를 확인해주세요.";
        } else if (exception instanceof InternalAuthenticationServiceException) {
            errorMessage = "내부 시스템 문제로 로그인할 수 없습니다. 관리자에게 문의하세요.";
        } else if (exception instanceof UsernameNotFoundException) {
            errorMessage = "존재하지 않는 계정입니다.";
        } else {
            errorMessage = "알 수없는 오류입니다.";
        }

        errorMessage = URLEncoder.encode(errorMessage, "UTF-8");
        setDefaultFailureUrl("/login?error=" + errorMessage);
        super.onAuthenticationFailure(request, response, exception);
    }
}

 

AuthenticationException

어떤 이유로든 유효하지 않은 인증 개체와 관련된 모든 예외에 대한 추상 슈퍼클래스이다.

 

BadCredentialsException

자격 증명이 잘못되어 인증 요청이 거부된 경우 throw됩니다.

아이디나 비밀번호를 잘못 입력했을 때 발생한다.

InternalAuthenticationServiceException

내부적으로 발생한 시스템 문제로 인해 인증 요청을 처리할 수 없는 경우 발생

UsernameNotFoundException

username으로 사용자명을 찾을 수 없을 때 발생

 

 

URLEncoder.encode(String s, String enc)

application/x-www-form-urlencoded 특정 인코딩 체계를 사용하여 문자열을 형식으로 변환한다.

 

setDefaultFailureUrl

실패 대상으로 사용할 URL입니다.
매개변수: defaultFailureUrl – 실패 URL(예: "/loginFailed.jsp").

 

super.onAuthenticationFailure(request, response, exception);

defaultFailureUrl이 설정된 경우 리디렉션 또는 전달을 수행하고, 그렇지 않으면 401 오류 코드를 반환합니다.
리디렉션 또는 전달하는 경우 대상 보기에서 사용할 예외를 캐시하기 위해 saveException이 호출됩니다.

 

 

 

LoginItem.vue

console.log(err);
const url = decodeURIComponent(err.request.responseURL);
const afterStr = url.split("=");
const message = afterStr[1].replaceAll("+", " ");
alert(message);

 

 

서버를 켜서 비밀번호를 잘못 입력 후 로그인 해보자.

 

 

 

 

참고

jyleedev - [스프링 부트+스프링 시큐리티+타임리프] 로그인 실패 핸들러