Во-первых, вы, кажется, нигде не вызываете функцию userSession.Вы определяете его только в окончательном тесте токена.
Кроме того, вы вызываете always для jqXHR, возвращенного вызовом $.ajax.Метод always будет вызван независимо от того, успешен ли запрос ajax, и передаст предоставленные функции различные аргументы, в зависимости от состояния запроса.См. документацию по отложенному методу jQuery .Я думаю, что вы хотите использовать атрибут success параметров $.ajax для достижения того, что вы хотите.
Наконец, я не вижу, где вы устанавливаете $jUser, но ваш код, кажется, предполагаетоно сохраняется при загрузке страниц.Однако он сбрасывается на пустой объект ({}) каждый раз, когда выполняется ваш javascript (при каждой загрузке страницы).Вы можете захотеть его сериализовать и сохранить в объекте sessionStorage, чтобы он сохранялся, затем протестируйте его и отмените сериализацию до $jUser, если он сохранен.Кроме того, вы можете вызывать verifyUser при каждой загрузке страницы, используя сохраненный токен, если он существует, что будет менее эффективно, но должно работать.
Не имея доступа к серверу для вызовов Ajax, я не могу проверить свои изменения в вашем коде, но я все равно опубликую их, и вы можете попробовать их самостоятельно.Дайте мне знать, если это поможет.
// Initialize variables
var $jUser = {};
var $ajUsers = [];
var jUserJSON;
function failedLogin() {
// handle failed logins
$loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
$loginButton.text('Login').prop('disabled', false);
}
function ajaxError(url, testStatus, errorThrown) {
console.log("The " + url + " Ajax request failed. status:" + textStatus + ', errorThrown: ' + errorThrown);
}
function updatePageWithLogin() {
$('#index-page').css('display', 'none');
$('#main-page').css('display', 'block');
$userAvatar.attr('src', $jUser.avatar);
$userFullname.text($jUser.first_name + ' ' + $jUser.last_name);
$.getScript('/js/socket.js', function () {
console.log('script loaded');
});
}
function verifyUser(token) {
$.ajax({
type: "GET",
url: "/verify-user",
headers: {
'Authorization': 'Bearer ' + token
},
dataType: "json",
success: function (response) {
console.log("Auth", response)
if (response.status == "error") {
failedLogin();
return;
}
$jUser = response.authData.user;
// persist the $jUser object
jUserJSON = JSON.stringify($jUser);
sessionStorage.setItem('juser', jUserJSON);
console.log("$jUser: " + jUserJSON);
updatePageWithLogin();
},
error: function(jqXHR, textStatus, errorThrown) {
ajaxError("/verify-user", textStatus, errorThrown);
},
complete: function() {
// This will get called whether the Ajax request succeeds or fails
}
});
}
// Login POST
$('#frm-login').submit(function (e) {
event.preventDefault();
$loginButton.text('Please wait ...').prop('disabled');
$.ajax({
url: "/login-user",
type: "POST",
data: $('#frm-login').serialize(),
dataType: "json",
success: function(response) {
$loginButton.text('Logging in').prop('disabled', true);
console.log("Login", response)
if (response.status == "error") {
failedLogin();
return;
}
sessionStorage.setItem('token', response.token); // not sure this is necessary now
if (response.token) { verifyUser(response.token) }
},
error: function(jqXHR, textStatus, errorThrown) {
ajaxError("/login-user", textStatus, errorThrown);
},
complete: function() {
// This will get called whether the Ajax request succeeds or fails
}
})
});
jUserJSON = sessionStorage.getItem("juser");
if (jUserJSON) {
// The user has already authenticated
$jUser = JSON.parse(jUserJSON);
updatePageWithLogin();
}
console.log("$jUser: " + jUserJSON);