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

Question

在提交事件时，我设置了根据收到的数据做一些事情，我想在我刷新页面，即使我做了我所做的事情（使用 if sessionStorage.token ）它也不起作用。我之前用 Javascript 做了完全相同的场景，我发誓它有效。

如何解决？请帮助我。

            // Initialize variables
            var $jUser = {};
            var $ajUsers = [];

            // 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"
            }).always(function (response) {
                $loginButton.text('Logging in').prop('disabled')
                console.log("Login", response)
                if (response.status == "error") {
                    $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                    return
                }
                sessionStorage.setItem('token', response.token)
                if (sessionStorage.token) {
                    $.ajax({
                        type: "GET",
                        url: "/verify-user",
                        headers: {
                            'Authorization': 'Bearer ' + sessionStorage.token
                        },
                        dataType: "json"
                    }).always(function (response) {
                        console.log("Auth", response)
                        if (response.status == "error") {
                            $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                            return

                        }
                        $('#index-page').css('display', 'none')
                        $('#main-page').css('display', 'block')
                        $.getScript('/js/socket.js', function () {
                            console.log('script loaded');
                        });
                        $jUser = response.authData.user
                        $userAvatar.attr('src', $jUser.avatar)
                        $userFullname.text($jUser.first_name + ' ' + $jUser.last_name)
                        console.log($jUser)
                    })
                }
            })
        })
        console.log($jUser)
        if (sessionStorage.token) {
            function userSession() {
                $('#index-page').css('display', 'none')
                $('#main-page').css('display', 'block')
                $userAvatar.attr('src', $jUser.avatar)
                $userFullname.text($jUser.first_name + ' ' + $jUser.last_name)
                console.log('hello')
            }
        }

Answer 1

一方面，您似乎没有在任何地方调用函数 userSession。您只是在最终的令牌测试中定义它。

此外，您在 $.ajax 调用返回的 jqXHR 上调用 always。无论 ajax 请求是否成功，都会调用 always 方法，并根据请求的状态将不同的参数传递给提供的函数。参见jQuery deferred method documentation。我认为您想使用 $.ajax 参数的 success 属性来实现您想要的。

最后，我没有看到您在哪里设置 $jUser，但您的代码似乎假定它在页面加载期间保持不变。但是，每次执行 javascript 时（在每次页面加载时），它都会重置为空对象 ({})。您可能希望将其序列化并将其保存在 sessionStorage 对象中，以便它会持续存在，然后对其进行测试并在存储时将其反序列化为 $jUser。或者，您可以在每个页面加载时调用 verifyUser 使用存储的令牌（如果存在），这会降低效率，但应该可以工作。

如果无法访问服务器以进行 Ajax 调用，我无法测试我对您的代码所做的更改，但我会 post 无论如何，您可以自己尝试。如果有帮助，请告诉我。

// 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);

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

How to keep interface view on page load?

variables

jquery

session-storage

page-refresh