Pre-Project D13

어떻게 하면 클라측에서 사용자가 포스트 수정버튼을 눌러 넘어가기 전에 원작성자가 아니면 바로 팝업을 띄우게 할 수 있을까?

먼저 사용자가 로그인에 성공하면 클라측에 Authorization과 Refresh 헤더값에 토큰을 끼워 보낸다.(JWT)
하지만 이것은 헤더일뿐 사용자의 직접적인 정보 이를테면 displayName이나 이메일을 알 수 없어서
미리 유효성검증을 못하는 상황이다.

해결

@Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .csrf().disable()        // (2)
                .cors(withDefaults())    // (3)
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)  // (1) 추가
                .and()
                .formLogin().disable()   // (4)
                .httpBasic().disable()   // (5)
                .apply(new CustomFilterConfigurer())
                .and()
                .authorizeHttpRequests(authorize -> authorize
                        .antMatchers(HttpMethod.POST, "/api/members/sign").permitAll()
                        .antMatchers(HttpMethod.POST, "/api/members/login").permitAll()
                        .antMatchers(HttpMethod.POST, "/api/questions").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.POST, "/api/questions/*/answers").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.POST, "/api/answers/*/comments").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.PATCH, "/api/questions/*").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.PATCH, "/api/questions/*/answers/*").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.PATCH, "/api/answers/*/comments/*").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.DELETE, "/api/questions/*").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.DELETE, "/api/questions/*/answers/*").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.DELETE, "/api/answers/*/comments/*").hasAnyRole("USER", "ADMIN")
                        .antMatchers(HttpMethod.GET, "api/members/info").hasAnyRole("USER", "ADMIN") //추가!
                        .antMatchers(HttpMethod.GET, "/api/questions/**").permitAll()
                        .antMatchers(HttpMethod.GET, "/api/answers/{answer-id}/comments/**").permitAll()
                        .antMatchers(HttpMethod.GET, "/api/member/**").permitAll()
                        .anyRequest().permitAll()
                );
        return http.build();
    }

MemberController클래스에 또 하나의 GetMapping을 만들었다.
프론트분들은 저 요청 Url을 기준삼아 이미 회원가입 및 로그인이 완료된
유저가 어떤 게시물의 수정이나 삭제를 요청할 경우 먼저 저 Url로 요청을 보내서
id와 displayName을 얻고
그것과 원게시물에 쓰여있는 displayName을 비교해서 같다면 수정 || 삭제페이지로 넘어가고
다르다면 빨간경고팝업이 뜨도록 구성하셨다.

백엔드개발자인 나는 위 2개 삽화처럼 로직을 짜줘야 하고 또 필터등록을 위해
.antMatchers(HttpMethod.GET, "api/members/info").hasAnyRole("USER", "ADMIN")
을 필터체인에 추가해줬다.

Cors이슈를 해결하면서도 이미 잘아는 프론트만이 백엔드 서버에 요청을 보내게 하려면?

config.domain을 application.properties에 등록하고
저렇게 WebConfig클래스에 @Value로 적용하면 OK이다.