如何在页面加载时保持界面视图?

首先,您似乎没有调用函数 userSession 任何地方。您只是在最后的令牌测试中定义它。

还有,你打电话来 always 在JQXHR返回的 $.ajax 呼叫。这个 总是 方法将被调用,不管Ajax请求是否成功,并根据请求的状态向提供的函数传递不同的参数。查看 jQuery deferred method documentation . 我想你想用 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);