[SPRING] AngularJS - 404 로그 아웃시 스프링 보안

AngularJS - 404 로그 아웃시 스프링 보안

Spring Boot, Spring Security 및 AngularJS를 사용하여 간단한 단일 페이지 응용 프로그램을 작성하는 방법을 설명하는 자습서로 작업하고 있습니다. https://spring.io/guides/tutorials/spring-security-and-angular-js/

현재 로그 된 사용자를 로그 아웃 할 수 없습니다. "/ logout"에 대한 POST 요청을 수행하면 "404 not found"가 표시됩니다 - Google 크롬 디버거의 화면 :

왜 얻을 수 있습니까? POST를 수행했습니다. 왜 "/ login? logout"이 아닌 "/ logout"입니까? 다음은 사용자가 로그 아웃 버튼을 클릭 할 때 호출되는 코드입니다.

$scope.logout = function() {
            $http.post('logout', {}).success(function() {
                $rootScope.authenticated = false;
                $location.path("/");
            }).error(function(data) {
                console.log("Logout failed")
                $rootScope.authenticated = false;
            });
        }

봄 코드 :

@SpringBootApplication
@RestController
public class UiApplication {

    @RequestMapping("/user")
    public Principal user(Principal user) {
        return user;
    }

    @RequestMapping("/resource")
    public Map<String, Object> home() {
        Map<String, Object> model = new HashMap<String, Object>();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
    }

    public static void main(String[] args) {
        SpringApplication.run(UiApplication.class, args);
    }

    @Configuration
    @Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
    protected static class SecurityConfiguration extends WebSecurityConfigurerAdapter {
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http.httpBasic().and().authorizeRequests()
                    .antMatchers("/index.html", "/home.html", "/login.html", "/").permitAll().anyRequest()
                    .authenticated().and().csrf()
                    .csrfTokenRepository(csrfTokenRepository()).and()
                    .addFilterAfter(csrfHeaderFilter(), CsrfFilter.class);
        }

        private Filter csrfHeaderFilter() {
            return new OncePerRequestFilter() {
                @Override
                protected void doFilterInternal(HttpServletRequest request,
                        HttpServletResponse response, FilterChain filterChain)
                        throws ServletException, IOException {
                    CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class
                            .getName());
                    if (csrf != null) {
                        Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
                        String token = csrf.getToken();
                        if (cookie == null || token != null
                                && !token.equals(cookie.getValue())) {
                            cookie = new Cookie("XSRF-TOKEN", token);
                            cookie.setPath("/");
                            response.addCookie(cookie);
                        }
                    }
                    filterChain.doFilter(request, response);
                }
            };
        }

        private CsrfTokenRepository csrfTokenRepository() {
            HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
            repository.setHeaderName("X-XSRF-TOKEN");
            return repository;
        }
    }

}

전체 각도 JS 코드 :

angular.module('hello', [ 'ngRoute' ]).config(function($routeProvider, $httpProvider) {

    $routeProvider
.when('/', {templateUrl : 'home.html', controller : 'home'  })
.when('/login', { templateUrl : 'login.html',   controller : 'navigation'   })
.otherwise('/');

    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

}).controller('navigation',

        function($rootScope, $scope, $http, $location, $route) {

            $scope.tab = function(route) {
                return $route.current && route === $route.current.controller;
           };

            var authenticate = function(credentials, callback) {

                var headers = credentials ? {
                    authorization : "Basic "
                            + btoa(credentials.username + ":"
                                    + credentials.password)
                } : {};

                $http.get('user', {
                    headers : headers
                }).success(function(data) {
                    if (data.name) {
                        $rootScope.authenticated = true;
                    } else {
                        $rootScope.authenticated = false;
                    }
                    callback && callback($rootScope.authenticated);
                }).error(function() {
                    $rootScope.authenticated = false;
                    callback && callback(false);
                });

            }

            authenticate();
            $scope.credentials = {};            
            $scope.login = function() {
                authenticate($scope.credentials, function(authenticated) {
                    if (authenticated) {
                        console.log("Login succeeded")
                        $location.path("/");
                        $scope.error = false;
                        $rootScope.authenticated = true;
                    } else {
                        console.log("Login failed")
                        $location.path("/login");
                        $scope.error = true;
                        $rootScope.authenticated = false;
                    }
                })          
            };

            $scope.logout = function() {
                $http.post('logout', {}).success(function() {
                    $rootScope.authenticated = false;
                    $location.path("/");
                }).error(function(data) {
                    console.log("Logout failed")
                    $rootScope.authenticated = false;
                });         
            }

        }).controller('home', function($scope, $http) { 
           $http.get('/resource/').success(function(data) {         
               $scope.greeting = data; }) });

나는 봄에 처음 온다. 튜토리얼의 전체 코드는 다음과 같습니다. https://github.com/dsyer/spring-security-angular/tree/master/single

해결법

1. ==============================

   1.실제로 필요한 것은 로그 아웃 성공 처리기를 추가하는 것입니다.

   실제로 필요한 것은 로그 아웃 성공 처리기를 추가하는 것입니다.

   @Component
   public class LogoutSuccess implements LogoutSuccessHandler {
   
   @Override
   public void onLogoutSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication)
           throws IOException, ServletException {
       if (authentication != null && authentication.getDetails() != null) {
           try {
               httpServletRequest.getSession().invalidate();
               // you can add more codes here when the user successfully logs
               // out,
               // such as updating the database for last active.
           } catch (Exception e) {
               e.printStackTrace();
               e = null;
           }
       }
   
       httpServletResponse.setStatus(HttpServletResponse.SC_OK);
   
   }
   
   }
   

   보안 설정에 성공 처리기 추가

   http.authorizeRequests().anyRequest().authenticated().and().logout().logoutSuccessHandler(logoutSuccess).deleteCookies("JSESSIONID").invalidateHttpSession(false).permitAll();
   

2. ==============================

   2.최신 버전의 Spring Boot에는 HttpStatusReturningLogoutSuccessHandler라는 클래스가 있는데, 기본값 당 HTTP 200을 반환합니다. 자사의 JavaDoc 말한다 :

   최신 버전의 Spring Boot에는 HttpStatusReturningLogoutSuccessHandler라는 클래스가 있는데, 기본값 당 HTTP 200을 반환합니다. 자사의 JavaDoc 말한다 :

   그것을 쓰려면 다음과 같이 작성하십시오 :

           //... 
           .formLogin()
           .and()
           .logout().logoutSuccessHandler(new HttpStatusReturningLogoutSuccessHandler());
   

3. ==============================

   3.$ http.post ( 'logout', {})를 $ http.post ( '\ logout')로 변경하십시오.

   $ http.post ( 'logout', {})를 $ http.post ( '\ logout')로 변경하십시오.

   그래서 그것은 이렇게 될 것입니다 :

   $scope.logout = function () {
       $http.post('\logout')
           .success(function () {
               // on success logic
           })
           .error(function (data) {
               // on errorlogic
           });
   }
   

from https://stackoverflow.com/questions/33694905/spring-security-with-angularjs-404-on-logout by cc-by-sa and MIT license