[JAVA/SpringBoot] 회원 가입 UI 반영 (2-6)

[여기에 적은 거는 강의 내용을 다 적은게 아니라서 강의자료 보면서 이 게시글 참고하자.]

[스프링 심화 강의 2주차 6강 회원 가입 UI 반영]

 

- springCore 프로젝트에서 실습

 

회원 가입 UI 반영 하면서 적용해야할 사항

• 타임리프 모듈 추가
  • [코드스니펫] build.gradle

		// Thymeleaf (뷰 템플릿 엔진)
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

 

• css 폴더로 옮겨짐에 따라 index.html 파일에서 style.css 의 상대 경로도 변경

<link rel="stylesheet" href="css/style.css">

 

 

• 회원 가입 페이지 요청 처리
  • WebSecurityConfig 에 formLogin() 처리 부분 변경
  • [코드스니펫] 로그인 페이지 설정
  • 회원 가입 페이지 연동 테스트
    • '/' 로 접근하면 ⇒ '/user/login' 페이지로 이동함

                .and()
                    // 로그인 기능 허용
                    .formLogin()
                    .loginPage("/user/login")
                    .defaultSuccessUrl("/")
                    .failureUrl("/user/login?error")
                    .permitAll()

 

• UserController 파일 생성
  • [코드스니펫] controller > UserController

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    // 회원 로그인 페이지
    @GetMapping("/user/login")
    public String login() {
        return "login";
    }

    // 회원 가입 페이지
    @GetMapping("/user/signup")
    public String signup() {
        return "signup";
    }
}

 

 

• UI 이슈 해결
  • "기대하는 UI" vs "실제 UI"

 

• 로그인 페이지에 CSS 가 적용되지 않음
• 웹 페이지 이슈가 생겼을 때 원인을 파악하고 해결할 수 있는 능력 필요
• '개발자 도구' 로 에러 내용 확인

 

스프링 시큐리티의 URL 허용 정책 변경 필요 확인

  // image 폴더를 login 없이 허용
  .antMatchers("/images/**").permitAll()
  // css 폴더를 login 없이 허용
  .antMatchers("/css/**").permitAll()

 

[코드스니펫] security > WebSecurityConfig - 전체코드

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
@EnableWebSecurity // 스프링 Security 지원을 가능하게 함
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http.authorizeRequests()
                // image 폴더를 login 없이 허용
                .antMatchers("/images/**").permitAll()
                // css 폴더를 login 없이 허용
                .antMatchers("/css/**").permitAll()
                // 어떤 요청이든 '인증'
                .anyRequest().authenticated()
                .and()
                    // 로그인 기능 허용
                    .formLogin()
                    .loginPage("/user/login")
                    .defaultSuccessUrl("/")
                    .failureUrl("/user/login?error")
                    .permitAll()
                .and()
                    // 로그아웃 기능 허용
                    .logout()
                    .permitAll();
    }
}