spring_회원가입 UI 반영

회원가입 UI 반영

현업에서는 프론트개발자가 UI파일을 구현하면 그것을 받아서 서버를 구현한다.

로그인페이지를 받아오고 websecurityconfig 파일을 조금 수정해준다.
시큐리티에서 제공하는 로그인폼이아니라 html로 만들어져있는 로그인 폼으로 이동할수있도록 추가해주고, 로그인실패시에 에러페이지도 설정해준다.

그리고 application.properties에서
spring.thymeleaf.prefix=classpath:/static/ 을 넣어주었는데, 해당 내용은 thymelaeaf라는 뷰 템플릿을 사용하는데 그곳의 루트위치를 설정해 준 것이다.

로그인 요청시

user controller클래스를 보면 회원 로그인 api를 구성하는데

    @GetMapping("/user/login")
    public String login() {
        return "login";
    }

user/login으로 url get요청이 들어오면 login이라는 string을 반환해주면 아까 설정해주었던 thymelaeaf가 static에서 login.html 파일을 찾아서 내려준다.

로그인 에러시

    @GetMapping("/user/login/error")
    public String loginError(Model model) {
        model.addAttribute("loginError", true);
        return "login";
    }

model에 값을 줘서 다시 로그인 화면으로 리턴해주는 것이다.

회원가입 페이지

  	@GetMapping("/user/signup")
    public String signup() {
        return "signup";
    }

만들어둔 회원가입 페이지로 이동할수있도록 해놓았다.

UI 이슈

securityconfig에서 모든 절차에서 인증이 필요하다고 설정을 해놓았는데, 서버를 실행하는데 css를 가져오는 것에서도 인증이필요하기때문에 내가 설정해놓은 css가 서버에 뜨지 않았다.

그래서

        http.authorizeRequests()
                // image 폴더를 login 없이 허용
                .antMatchers("/images/**").permitAll()
                // css 폴더를 login 없이 허용
                .antMatchers("/css/**").permitAll()
                // 그 외 모든 요청은 인증과정 필요
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/user/login")
                .loginProcessingUrl("/user/login")
                .defaultSuccessUrl("/")
                .permitAll()
                .and()
                .logout()
                .permitAll();

이미지 폴더와 css를 가져오는 부분만 예외적으로 허용해두었고, 서버를 다시 실행하니까 css에 적용했던 로그인 화면이 나왔다.