Spring Boot angularjs安全自定义登录问题

Question

我无法使自定义登录页面与angularjs和spring boot security一起使用。 仅显示默认的浏览器登录表单。

我能够验证和授权用户，但默认登录页面会在第一次显示。 我也注销时获得302状态。

角版本：1.4.8，使用ui-router。

以下是我的主要js。

    'use strict';

angular
  .module('renalyxNis', [
    'ui.router','ui.bootstrap' ,'chart.js','ngAnimate','ngResource','angular-timeline'])
  .config(function($stateProvider,$urlRouterProvider,$locationProvider, $httpProvider) {

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




    $urlRouterProvider.otherwise('/login');

    $stateProvider

       .state('dashboard', {
        url:'/dashboard',
        controller : 'starterCtrl',
        templateUrl: 'pages/starter2.html'

    })
      .state('dashboard.home',{
        url:'/home',
        controller : 'appointmentCtrl',
        templateUrl:'pages/home.html'

      })
      .state('dashboard.session',{
        url:'/session',       
        controller : 'sessionCtrl',
        templateUrl:'pages/session.html'

      })
      .state('dashboard.shiftmanagement',{
        url:'/shiftmanagement',        
        controller : 'shiftManageCtrl',
        templateUrl:'pages/shiftmanagement.html'

      })
      .state('dashboard.dialysisconfig',{
        url:'/dialysisconfig',       
        controller : 'dialysisConfigCtrl',
        templateUrl:'pages/dialysisconfig.html'

      })
      .state('dashboard.staffconfig',{
        url:'/staffconfig',       
        controller : 'staffCtrl',
        templateUrl:'pages/staff.html'

      })

      .state('login',{
        templateUrl:'login.html',
        url:'/login'
    });

    $httpProvider.interceptors.push(function($q) {

        return {

            'responseError': function(rejection){

                var defer = $q.defer();

                if(rejection.status == 401){
                    console.dir(rejection);
                    console.log("rejected");
                    $state.go('login');
                }

                defer.reject(rejection);

                return defer.promise;

            }
        };
    });


  });

登录ctrl：

angular.module('renalyxNis')
.controller('LoginController',function($rootScope, $scope, $http, $location, $state) {

    $rootScope.authenticated = false;

  var authenticate = function(credentials, callback) {

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

        console.log("inside login");
        $http.get('user', {headers : headers}).success(function(data) {
            // $rootScope.authenticated = false;
            if (data.name) {
                $rootScope.authenticated = true;
                console.log("complete data");

                console.log(data);
                console.log('username :');
                $rootScope.username = (data.principal.username);
                $scope.username = (data.principal.username);
                console.log('auth :');
                $rootScope.roles = (data.principal.authorities); 
                console.log(data.principal.authorities);
                console.log('name');
                console.log(data.name);

                $scope.name = data.name;

            } else {
                console.log(data);
                $rootScope.authenticated = false;
            }
            callback && callback();
        }).error(function() {
            $rootScope.authenticated = false;
            callback && callback();
        });

    }

    //authenticate();
    $scope.credentials = {};
    $scope.login = function() {

        console.log("credentials");
        console.log($scope.credentials);
        authenticate($scope.credentials, function() {
            if ($rootScope.authenticated) {
                console.log("authenticated")
                // $location.path("/home");
                $state.go ('dashboard');

                $scope.error = false;
            } else {
                $state.go('login');
                //  $location.path("/login");
                $scope.error = true;
            }
        });
        console.log("in login");
    };

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

});

Websecurityconfig文件：

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    private static PasswordEncoder encoder;

    @Autowired
    private UserDetailsService customUserDetailsService;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        System.out.println("in configure1");
         http 
         .httpBasic().and()

         .authorizeRequests()
           .antMatchers( "/").permitAll()
           .anyRequest().authenticated().and()

           .logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).logoutSuccessUrl("/")
           .permitAll().and()
           .formLogin()
           .loginPage("/login")
           .permitAll().and()         
           .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class)
           .csrf().csrfTokenRepository(csrfTokenRepository());

    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(customUserDetailsService);
               // .passwordEncoder(passwordEncoder());
        System.out.println("in configure");

    }

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

    @Bean
    public PasswordEncoder passwordEncoder() {
        if(encoder == null) {
            encoder = new BCryptPasswordEncoder();
        }

        return encoder;
    }
}

CSRF标头过滤器：

public class CsrfHeaderFilter extends 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);
      }
    }

我从spring.io和dave syer登录示例中引用过，但无济于事。

Answer 1

.state('login',{
    templateUrl:'login.html',
    url:'/login'

没有指定LoginController，所以login.html可能无法正确呈现？

Answer 2

当与AngularJS一起使用时，请确保使用withHttpOnlyFalse（）：.csrf（）。csrfTokenRepository（CookieCsrfTokenRepository.withHttpOnlyFalse（））

如4.1文档所述：

https://docs.spring.io/spring-security/site/docs/current/apidocs/org/springframework/security/web/csrf/CookieCsrfTokenRepository.html ＃withHttpOnlyFalse--

...如果您确实使用http.sessionManagement(). ... invalidSessionUrl("login url or so")进行了设置，则仍会收到从服务器到invalidSessionUrl的302重定向http.sessionManagement(). ... invalidSessionUrl("login url or so") http.sessionManagement(). ... invalidSessionUrl("login url or so")