Witam!
Mam mały problem z logowaniem się w mojej aplikacji. Front w angularze a back w springu.
Stronę logowania napisałem sam i wyłączyłem żądania springa o hasło, jednakże podczas
odpalania strony i tak wyskakuje okno z prośbą o podanie hasła. Zalogowanie przez nie
uniemożliwia wylogowanie się na stronie. Ma ktoś jakiś pomysł na to? :)
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.security.SecurityProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.http.HttpMethod;
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.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.csrf.CsrfFilter;
import org.springframework.security.web.csrf.CsrfTokenRepository;
import org.springframework.security.web.csrf.HttpSessionCsrfTokenRepository;
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
@Autowired
public void configureAuth(AuthenticationManagerBuilder auth) throws Exception {
auth.inMemoryAuthentication()
.withUser("user").password("123").roles("USER")
.and()
.withUser("admin").password("321").roles("ADMIN");
}
protected void configure(HttpSecurity http) throws Exception {
http
.httpBasic().and()
.authorizeRequests()
.antMatchers("/home", "/login.html","/login", "/","/cars.html").permitAll()
.antMatchers("/customers.html").hasRole("ADMIN")
.antMatchers("/module1.js","/bootstrap.css","/style.css","/main.html","angular.js","album.js").permitAll()
.antMatchers(HttpMethod.GET,"/car/getCars").permitAll()
.anyRequest().authenticated()
.and()
.csrf().csrfTokenRepository(csrfTokenRepository())
.and()
.addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
}
private CsrfTokenRepository csrfTokenRepository() {
HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
repository.setHeaderName("X-XSRF-TOKEN");
return repository;
}
}
var myApp2 = angular.module("Module1", ['ngRoute','ngMap']);
myApp2.config(function($routeProvider, $locationProvider, $httpProvider){
$routeProvider
.when("/home",{
templateUrl: "main.html",
controller: "homeController"
})
.when("/cars",{
templateUrl: "cars.html",
controller: "carsController"
})
.when("/customers",{
templateUrl: "customers.html",
controller: "customerController"
})
.when("/customers/:id",{
templateUrl: "customerDetails.html",
controller: "customerDetailsController"
})
.when("/cars/:id",{
templateUrl: "carDetails.html",
controller: "carDetailsController"
})
.when("/contact",{
templateUrl: "contact.html",
controller: "contactController"
})
.when("/login",{
templateUrl: "login.html",
controller: "loginController"
})
.otherwise({
redirectTo: "/home"
})
.when("/test",{
templateUrl: "test.html",
controller: "testController"
})
$locationProvider.html5Mode(true);
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});
myApp2.controller('loginController', function($window, $rootScope, $scope, $http, $location) {
var self = this
var authenticate = function(credentials, callback) {
var headers = credentials ? {authorization : "Basic "
+ btoa(credentials.username + ":" + credentials.password)
} : {};
$http.get('user', {headers : headers}).then(function(response) {
$rootScope.logged = response.data.name;
$rootScope.authenticatedAdmin = false;
if (response.data.name) {
$rootScope.authenticated = true;
if(response.data.name == 'admin'){
$rootScope.authenticatedAdmin = true;
}
else{}
} else {
$rootScope.authenticated = false;
}
callback && callback();
}, function() {
$rootScope.authenticated = false;
callback && callback();
});
}
authenticate();
$scope.credentials = {};
$scope.login = function() {
authenticate($scope.credentials, function() {
if ($rootScope.authenticated) {
$location.path("/");
$scope.error = false;
$window.location.reload();
} else {
$location.path("/login");
$scope.error = true;
$window.location.reload();
}
});
};
$scope.logout = function() {
$http.post('logout', {}).finally(function() {
$rootScope.authenticated = false;
$rootScope.authenticatedAdmin = false;
$location.path("/");
$window.location.reload();
});
}
});
myApp2.controller('contactController', function(NgMap, $scope) {
NgMap.getMap().then(function(map) {
console.log(map.getCenter());
console.log('markers', map.markers);
console.log('shapes', map.shapes);
});
$scope.text
});
myApp2.controller("testController", function($scope){
});
myApp2.controller("homeController", function($scope){
$scope.date = Date.now();
});
myApp2.controller("carsController", function($scope, $http){
$scope.sortColumn = "brand";
$scope.reverseSort = false;
$scope.sortData = function (column){
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column){
if($scope.sortColumn == column){
return $scope.reverseSort ? 'arrow-down' : 'arrow-up'
}
return '';
}
$http({
method: 'GET',
url:'http://localhost:8080/car/getCars'})
.then(function(response) {
$scope.cars = response.data;
});
$scope.getAllCars = function getCars(){
$http.get('http://localhost:8080/car/getCars')
.then(function(response) {
$scope.cars = response.data;
});
}
$scope.deleteCar = function deleteCar(id){
var url = "http://localhost:8080/car/deleteCar/"+id;
$http.delete(url).then(function(response){
$scope.getCars();
})
}
});
myApp2.controller("carDetailsController", function($scope, $http, $route){
$scope.images = [
{image : 'images/fordBronco.jpg', thumbnail: 'images/resized/fordBronco_th.jpg', description : 'image1'},
{image : 'images/fordBronco2.jpg', thumbnail: 'images/resized/fordBronco2_th.jpg', description : 'image2'},
{image : 'images/fordbronco3.jpg', thumbnail: 'images/resized/fordbronco3_th.jpg', description : 'image3'},
{image : 'images/fordBronco4.jpg', thumbnail: 'images/resized/fordBronco4_th.jpg', description : 'image4'},
{image : 'images/fordBronco5.jpg', thumbnail: 'images/resized/fordBronco5_th.jpg', description : 'image5'},
{image : 'images/fordBronco6.jpg', thumbnail: 'images/resized/fordBronco6_th.jpg', description : 'image6'},
{image : 'images/fordBronco7.jpg', thumbnail: 'images/resized/fordBronco7_th.jpg', description : 'image7'}
];
$scope.currentImage = $scope.images[0];
$scope.setCurrentImage = function (image){
$scope.currentImage = image;
};
$http({
method: 'GET',
url:'http://localhost:8080/car/getById/'+$route.current.params.id,
})
.then(function(response) {
$scope.car = response.data;
});
});
myApp2.controller("customerDetailsController", function($scope, $http, $route){
$http({
method: 'GET',
url:'http://localhost:8080/customer/getById/'+$route.current.params.id,
})
.then(function(response) {
$scope.customer = response.data;
});
});
myApp2.controller("customerController", function($scope,$http){
$http({
method: 'GET',
url:'http://localhost:8080/customer/getAllCustomers'})
.then(function(response) {
$scope.customers = response.data;
});
$scope.getAllCustomers = function getAllCustomers(){
$http.get('http://localhost:8080/customer/getAllCustomers')
.then(function(response) {
$scope.customers = response.data;
});
}
$scope.deleteCustomer = function deleteCustomer(id){
var url = "http://localhost:8080/customer/deleteCustomer/"+id;
$http.delete(url).then(function(response){
$scope.getAllCustomers();
})
}
});
myApp2.controller('dateController', ['$scope', function ($scope) {
$scope.date = Date.now();
}
]);
myApp2.controller('SlideController', ['$scope', '$location',function($scope, $location){
$scope.goNext = function (hash) {
$location.path(hash);
}}]);
myApp2.directive('ngReallyClick', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
var message = attrs.ngReallyMessage;
if (message && confirm(message)) {
scope.$apply(attrs.ngReallyClick);
}
});
}
}