Cześć.
Próbuję stworzyć namespace w osobnym pliku js. Namespace zwie się "UTILS.tokens" i zawiera metody pomocnicze, które dodają token CSRF do nagłówka w każdym zapytaniu ajaxowym typu post, put, delete. Pobierają również token z responsa i wsadzają do metatagów na stronie jeśli potrzeba (przed autentykacją oraz rejestracja, które są na na oddzielnych stronach). Chce wysyłać tokeny w nagłówkach i przechowywać w metatagach więc double cookies mnie nie interesują.
Problem jest taki, że dostaje błąd w javascript jak i jQuery:
"Uncaught ReferenceError: UTILS is not defined"
Ogólnie wcześniej działało, ale kod się powtarzał więc chciałem to oczyścić i zrobić jeden reużywalny, niestety sie sypło i nie wiem co jest źle, bo to mój pierwszy raz . Czy sposób w jaki event listenera używam w namespace jest dobry i czy dobrze sie odwołuje...
Przykładowy kod:
namespace w utils.js:
UTILS = UTILS || {};
UTILS.tokens = UTILS.tokens || {};
UTILS.tokens.getCsrfToken = (function (jqXHR) {
$('meta[name="X-CSRF-TOKEN"]').attr('content', jqXHR.getResponseHeader('X-CSRF-TOKEN'));
$('meta[name="X-CSRF-HEADER"]').attr('content', jqXHR.getResponseHeader('X-CSRF-HEADER'));
});
UTILS.tokens.setHeaderWithCsrfToken = (function (jqXHR) {
var token = $('meta[name="X-CSRF-TOKEN"]').attr('content');
var header = $('meta[name="X-CSRF-HEADER"]').attr('content');
jqXHR.setRequestHeader(header, token);
});
UTILS.tokens.setCsrfToken = (function () {
return $.ajax({
url: '/token',
type: 'GET',
timeout: 3000
}).then(function (data, textStatus, jqXHR) {
getCsrfToken(jqXHR);
}, function (jqXHR) {
console.log('Problem with token retrieval occurred: ' + jqXHR.status);
});
});
UTILS.tokens.attachToken = (function () {
$(document).on('ajaxSend', function (element, jqXHR, settings) {
if (settings.type === 'POST' || settings.type === 'PUT' || settings.type === 'DELETE') {
setHeaderWithCsrfToken(jqXHR);
}
});
});
strona z logowaniem login.js:
$(document).ready(function () {
UTILS.tokens.attachToken();
UTILS.tokens.setCsrfToken(); // token has to be properly set, before post submit
$('#loginForm').submit(function (event) {
event.preventDefault();
var data = 'username=' + $('#username').val() + '&password=' + $('#password').val();
return $.ajax({
url: '/login', // spring exposes login service on default at "/login" endpoint
type: 'POST',
data: data,
timeout: 3000
}).then(function () {
var preLoginInfo = JSON.parse($.cookie("restsecurity.pre.login.request"));
window.location.replace(preLoginInfo.url);
}, function () {
alert('Wrong Credentials, try again.');
});
});
$('#registerBtn').on('click', function () {
window.location = '/register.html';
});
});