Spring security not allowing angularjs to Run

Question

I have a todo spring boot app works 100% without spring security ,but if i use spring security angularjs will not work any more i use thymeleaf for pages but this page i use HTML with Angular without thymeleaf but angular actions will not work i am sure that the problem is with spring security HTML PAGE :




    
    
    
    
    

    Tasks



    
    



    
    


    

    

    



    

    
    
    

    

    
    
    
    
    
    
    

    









    
        
            
            
                
                Our logo
            
            
            
                
                    # Activity
                    

                    Chat
                    
                    Tasks
                    
                    Files
                    
                    Calender
                    
                    Search
                    
                    
                        Settings 
                        
                            Action
                            Another action
                            Something else here
                            
                            Separated link
                            
                            One more separated link
                        
                    
                
            
        
    

    


    

    
        
        
            
                
                    
                        
                            
                                
                                    
                                        
                                        Project name 
                                    
                                    
                                        
                                            Activity
                                        
                                        
                                            
                                                Mohamed
                                            
                                            logout
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        

        
        
        

        

            
            
                
                    
                        
                        
                            Recent Tasks
                            
                            
                        
                    
                    
                        
                
                    {{task.taskPriority}}
                
                
                    {{task.taskPriority}}
                
                
                    {{task.taskPriority}}
                
                            
                                
                                
                            
                            
                                
                                    {{task.taskName}}
                                    {{task.taskStatus}}
                                
                            
                            
                                
                                    {{task.taskName}}
                                    {{task.taskStatus}}
                                
                            
                        
                    
                
                
                    
                        
                            
                            Add Task
                            
                        
                    
                    
                        
                            
                                
                                    Task Name:
                                    
                                
                                
                                    Task Description:
                                    
                                
                                
                                    Task Status:
                                    
                                        
                                    
                                
                                
                                    Task Priority:

App.JS

var taskManagerModule = angular.module('taskManagerApp', ['ngAnimate']);

taskManagerModule.controller('taskManagerController', function ($scope,$http) {

    var urlBase="";
    $scope.toggle=true;
    $scope.selection = [];
    $scope.statuses=['ACTIVE','COMPLETED'];
    $scope.priorities=['HIGH','LOW','MEDIUM'];
    $http.defaults.headers.post["Content-Type"] = "application/json";

    function findAllTasks() {
        //get all tasks and display initially
        $http.get(urlBase + '/tasks/search/findByTaskArchived?archivedfalse=0').
            success(function (data) {
                if (data._embedded != undefined) {
                    $scope.tasks = data._embedded.tasks;
                } else {
                    $scope.tasks = [];
                }
                for (var i = 0; i < $scope.tasks.length; i++) {
                    if ($scope.tasks[i].taskStatus == 'COMPLETED') {
                        $scope.selection.push($scope.tasks[i].taskId);
                    }
                }
                $scope.taskName="";
                $scope.taskDesc="";
                $scope.taskPriority="";
                $scope.taskStatus="";
                $scope.toggle='!toggle';
            });
    }

    findAllTasks();

    //add a new task
    $scope.addTask = function addTask() {
        if($scope.taskName=="" || $scope.taskDesc=="" || $scope.taskPriority == "" || $scope.taskStatus == ""){
            alert("Insufficient Data! Please provide values for task name, description, priortiy and status");
        }
        else{
         $http.post(urlBase + '/tasks', {
             taskName: $scope.taskName,
             taskDescription: $scope.taskDesc,
             taskPriority: $scope.taskPriority,
             taskStatus: $scope.taskStatus
         }).
          success(function(data, status, headers) {
             alert("Task added");
             var newTaskUri = headers()["location"];
             console.log("Might be good to GET " + newTaskUri + " and append the task.");
             // Refetching EVERYTHING every time can get expensive over time
             // Better solution would be to $http.get(headers()["location"]) and add it to the list
             findAllTasks();
            });
        }
    };

    // toggle selection for a given task by task id
      $scope.toggleSelection = function toggleSelection(taskUri) {
        var idx = $scope.selection.indexOf(taskUri);

        // is currently selected
        // HTTP PATCH to ACTIVE state
        if (idx > -1) {
          $http.patch(taskUri, { taskStatus: 'ACTIVE' }).
          success(function(data) {
              alert("Task unmarked");
              findAllTasks();
            });
          $scope.selection.splice(idx, 1);
        }

        // is newly selected
        // HTTP PATCH to COMPLETED state
        else {
          $http.patch(taskUri, { taskStatus: 'COMPLETED' }).
          success(function(data) {
              alert("Task marked completed");
              findAllTasks();
            });
          $scope.selection.push(taskUri);
        }
      };


    // Archive Completed Tasks
      $scope.archiveTasks = function archiveTasks() {
          $scope.selection.forEach(function(taskUri) {
              if (taskUri != undefined) {
                  $http.patch(taskUri, { taskArchived: 1});
              }
          });
          alert("Successfully Archived");
          console.log("It's risky to run this without confirming all the patches are done. when.js is great for that");
          findAllTasks();
      };

});

//Angularjs Directive for confirm dialog box
taskManagerModule.directive('ngConfirmClick', [
    function(){
         return {
             link: function (scope, element, attr) {
                 var msg = attr.ngConfirmClick || "Are you sure?";
                 var clickAction = attr.confirmedClick;
                 element.bind('click',function (event) {
                     if ( window.confirm(msg) ) {
                         scope.$eval(clickAction);
                     }
                 });
             }
         };
 }]);

Spring security config :

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    UserDetailsService userDS;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                .antMatchers("/register","/").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .usernameParameter("email")
                .passwordParameter("password")
                .defaultSuccessUrl("/dashboard")
                .permitAll()
                .and()
                .logout().logoutSuccessUrl("/login?logout")
                .permitAll();
    }

    @Bean
    public BCryptPasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth
                .userDetailsService(userDS).passwordEncoder(passwordEncoder());
    }

    @Override
    protected UserDetailsService userDetailsService() {
        return userDS;
    }
}

Ibrahim Mohamed · Accepted Answer

i solved the problem adding http.csrf().disable(); to spring security config

Spring security not allowing angularjs to Run

Answers (2)

Related Questions