하나씩 차근차근
article thumbnail

앞에서 로그인 기능을 완성하고 로그인까지 성공을 했습니다.

다만, 로그인을 했음에도 네비게이션 바에는 로그아웃이 표시되지 않고 로그인으로 표시되어 있습니다.

이번에는 로그인 상태에서 로그아웃 메뉴가 나타나고 이를 클릭하면 로그아웃이 되도록 작성하겠습니다.

 

네비게이션바 수정

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	...
</head>
<body>
	...
	            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
	                <li class="nav-item">
	                    <a class="nav-link" sec:authorize="isAnonymous()" href="/user/login">로그인</a>
	                    <a class="nav-link" sec:authorize="isAuthenticated()" href="/user/logout">로그아웃</a>
	                </li>
	                <li class="nav-item">
	                    <a class="nav-link" href="/user/signup">회원가입</a>
	                </li>
	            </ul>
	...
</body>
</html>

 

타임리프의 sec:authorize 속성을 통해 로그인 여부를 확인할 수 있으며,

위와 같이 로그인 상태에 따라 로그인 혹은 로그아웃 메뉴를 보여주도록 합니다.

  • sec:authorize = "isAnonymouse()" : 로그인 되지 않았을 경우
  • sec:authorize = "isAuthenticated()" : 로그인 된 경우

 

로그아웃 설정

마지막으로 스프링 시큐리티 설정 파일인 SecurityConfig 에 로그아웃 기능을 추가합니다.

package com.crud;

...

@Configuration
@EnableWebSecurity
public class SecurityConfig {

	@Bean
	SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
		http.authorizeHttpRequests().requestMatchers(
				new AntPathRequestMatcher("/**")).permitAll()
			.and()
				.formLogin()
				.loginPage("/user/login")
				.defaultSuccessUrl("/")
			.and()
				.logout()
				.logoutRequestMatcher(new AntPathRequestMatcher("/user/logout"))
				.logoutSuccessUrl("/")
				.invalidateHttpSession(true);
		
		return http.build();
	}
	...
}

logoutRequestMatcher 를 통해 "localhost:8080/user/logout" 으로 접속하면 로그아웃이 되도록 설정하였으며,

로그아웃에 성공하면 메인 페이지로 돌아갑니다.

또한 invalidatedHttpSession 은 로그아웃 이후 세션의 값을 삭제하는 명령어입니다.

 

결과

로그인을 하면 다음과 같이 네비게이션바에 로그아웃 메뉴가 나타나게 됩니다.

로그아웃을 클릭하면 다시 네비게이션바에 로그인 메뉴가 나타나게 됩니다.

profile

하나씩 차근차근

@jeehwan_lee

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!