Question

我想在前端构建一个带有干净Angular的Spring Boot应用程序。我的要求是：

应用程序是基于浏览器的
包含登录表单
某些网页和其他来电必须受到保护

这些是非常基本的要求，但我失去了保护Web应用程序的可能性。这样做有什么标准的，推荐的方法吗？我真的试图按照https://spring.io/guides/tutorials/spring-security-and-angular-js/的教程进行操作，但由于混合了一些可能的解决方案而不是描述一个解决方案，所以它很混乱。

感谢您提出任何建议。

Answer 1

我在我的情况下遇到了同样的问题我没有使用angularjs进行身份验证，我使用Thymleaf所以首先需要创建配置类

 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
 import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.builders.WebSecurity;
    import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
  import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;


   import javax.sql.DataSource ;

   @Configuration
    @EnableWebSecurity
   @EnableGlobalMethodSecurity
   public class SecurityConfig extends WebSecurityConfigurerAdapter {


@Autowired
Securityhandler successHandler ;


//this method to make datasource 
@Autowired  
public void GlobalConfig(AuthenticationManagerBuilder auth,DataSource dataSource) throws Exception {
auth.jdbcAuthentication()


.dataSource(dataSource) 
    .usersByUsernameQuery("SELECT  \"user\" AS principal , \"Password\" AS  credentials , true FROM \"usersss\" WHERE \"user\" =  ? ")
            .authoritiesByUsernameQuery("SELECT  u.\"user\" AS principal , r.role as role  FROM \"UTILISATEUR\" u ,\"Role\" r where u.id_role=r.id_role AND \"user\" = ?  ");

}
        //this one to ignore security for your ressources 
    @Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring()
    .antMatchers("/bootstrap/**","/css/**");

}
@Override
protected void configure(HttpSecurity http) throws Exception {
http

    .csrf().disable()   
    .authorizeRequests()
    .anyRequest()   
        .authenticated()        
            .and()
            .formLogin()
         //this one add to login page 
            .loginPage("/login")
            .permitAll()
            .successHandler(successHandler)
            .and()      
            .logout()
            .invalidateHttpSession(true)
            .logoutUrl("/logout")
            .permitAll();   
}

}

现在thymleaf必须使用uri /login解析该页面所以你需要添加viewresolver

你必须在下面创建另一个类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class WebMVCconfig extends WebMvcConfigurerAdapter {

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/login").setViewName("login");
    registry.addViewController("/logout").setViewName("login");

}
}

最后在您的html页面中名为templates的文件夹下，您需要在doctype中声明thymleaf，如下所示

 <html xlmns:th="http://www.thymeleaf.org" xml:lang="fr">

您完成了登录表单

    <form name="form" id="form" class="form-horizontal" th:action="@{/login}" method="post">

                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input id="username" type="text" class="form-control" name="username" value="" required="" placeholder="Nom de l'utilisateur"/>                                        
                </div>

                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input id="password" type="password" class="form-control" name="password" required="" placeholder="Mot de passe"/>
                </div>                                                                  

                        <div  th:if="${param.error}" class="alert alert-default ">    
             <i class="glyphicon glyphicon-exclamation-sign"></i>
              <b>  Nom d'utilisateur et mot de passe invalide.</b>

            </div>

                        <div  th:if="${param.logout}" class="alert alert-default ">    
              <i class="glyphicon glyphicon-exclamation-sign"></i>
              <b>  Vous venez de déconnecter</b>

            </div>
                <div class="form-group">
                    <!-- Button -->
                    <div class="col-sm-12 controls">
                        <button type="submit" href="#" class="btn btn-success pull-right"><i class="glyphicon glyphicon-log-in"></i> Connéxion</button>                          
                    </div>


                </div>

            </form>

现在，如果你想在你的应用程序中使用angularjs你必须添加会话，现在spring security提供了很多功能，比如现在保护web服务，如果你理解我想告诉你什么，这个解决方案会在每个url中提供一个登录页面您键入一次登录后必须使用angularJs创建另一个前端安全性，因此具有不同角色的多个用户无法通过更改urls

来访问权限

如何处理Spring Boot Angular应用程序安全性

1 个答案: