努力为 Angular js 应用程序添加弹簧安全性

Question

我正在尝试在 spring 项目中从 angular js 配置登录视图。下面是我拥有的 spring security xml 设置..

<http auto-config="false" entry-point-ref="loginUrlAuthenticationEntryPoint">
      <intercept-url pattern="/**" access="ROLE_ADMIN"/>
        <custom-filter position="FORM_LOGIN_FILTER" ref="theiaFormAuthenticationFilter"/>
      <custom-filter ref="theiaRestDigestFilter" after="FORM_LOGIN_FILTER" />
      <logout logout-success-url="/#/login" />
      <session-management invalid-session-url="/#/login" />
      <access-denied-handler error-page="/loginFailed"/>
</http>

每当我尝试转到任何页面时，它都会给我ERR_TOO_MANY_REDIRECTS，甚至是localhost/#/login。请帮忙。从过去两天开始一直在研究这个问题，但无处可去。

谢谢。

更新：

实际上，现在我更改了代码以使用 Spring 安全配置类。它能够提供 Spring Security 附带的默认登录页面。但我无法添加用于登录的 angularjs 路由。以下是安全代码：

@Configuration
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {


@Autowired
public void configureGlobalSecurity(AuthenticationManagerBuilder auth) throws Exception {
    auth.inMemoryAuthentication().withUser("bill").password("abc123").roles("USER");
    auth.inMemoryAuthentication().withUser("admin").password("root123").roles("ADMIN");
    auth.inMemoryAuthentication().withUser("dba").password("root123").roles("ADMIN","DBA");
}

@Override
protected void configure(HttpSecurity http) throws Exception {
    log.info("Configuring theia security settings.");
    http.authorizeRequests()
         .antMatchers("/libs/**").permitAll()
         .anyRequest().authenticated()
        .and()
        .formLogin()
            .loginPage("/#/login").permitAll()
        .and()
        .logout().permitAll();
}
}

它似乎无法识别/#/login。在这个应用程序中，我们没有索引页面。它必须直接进入登录页面。无论如何要在配置文件中添加角度路线？我错过了什么吗？

我现在正在学习本教程：https://www.youtube.com/watch?v=1zu8COg80q4

Answer 1

你有这个教程..你将为此目的最好的教程。它一步一步从简单的应用程序到最复杂的 oauth2 和拆分服务器。非常推荐： https://spring.io/guides/tutorials/spring-security-and-angular-js/

编辑： 因为你使用的是 angularjs，所以你不能做你正在做的事情。 Spring security 只会节省资产而不听 url。 这是单页应用程序，因此 webflow 上的所有控件都应该在客户端上。

你应该使用类似的东西：

http
        .httpBasic()
      .and()
        .authorizeRequests()
          .antMatchers("/index.html", "/home.html", "/login.html").permitAll()
          .anyRequest().authenticated();

因此，当客户端在未经许可的情况下尝试获取资源时，服务器不会向您提供资源。在客户端中，您将需要执行路由逻辑。

其实是这样的：

angular.module('hello', [ 'ngRoute' ]) // ... omitted code
.controller('navigation',

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

  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();
    }).error(function() {
      $rootScope.authenticated = false;
      callback && callback();
    });

  }

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

在服务器中，当您尝试发送 get /user 时，如果用户会话处于活动状态，服务器将返回会话用户。所以在服务器中你还需要：

@SpringBootApplication
@RestController
public class UiApplication {

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

  ...

}