页面加载时如何保留界面视图？sessionStorage.token验证无效求解

嘿，我仔细看了你的代码，马上就发现问题所在了！页面刷新后你虽然检查了sessionStorage.token，但没有重新获取用户数据，而且关键的会话恢复逻辑也没执行到位，导致页面状态无法保留。

核心问题点 #

1. 页面刷新时，$jUser会被重置为初始的空对象{}——你登录时赋值的用户数据只存在内存里，刷新页面就会丢失。
2. 你定义了userSession函数但根本没调用它，就算调用了，函数里依赖的$jUser也是空的，自然没法渲染用户头像和名称。
3. 页面加载阶段的逻辑没有重新调用/verify-user接口，没法拿到最新的用户数据来恢复状态。

修改后的代码方案 #

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

// 封装会话恢复的通用函数
function restoreSession() {
  // 没有token直接返回，不执行后续逻辑
  if (!sessionStorage.token) return;
  
  $.ajax({
    type: "GET",
    url: "/verify-user",
    headers: { 'Authorization': 'Bearer ' + sessionStorage.token },
    dataType: "json"
  }).always(function (response) {
    console.log("Auth on refresh", response);
    if (response.status == "error") {
      // 验证失败：清除无效token，切回登录页
      sessionStorage.removeItem('token');
      $('#index-page').css('display', 'block');
      $('#main-page').css('display', 'none');
      return;
    }
    // 验证成功：更新用户数据并渲染页面
    $jUser = response.authData.user;
    $('#index-page').css('display', 'none');
    $('#main-page').css('display', 'block');
    $userAvatar.attr('src', $jUser.avatar);
    $userFullname.text($jUser.first_name + ' ' + $jUser.last_name);
    // 加载socket脚本
    $.getScript('/js/socket.js', function () {
      console.log('script loaded');
    });
  });
}

// Login POST
$('#frm-login').submit(function (e) {
  e.preventDefault(); // 修复原代码中event未定义的问题
  $loginButton.text('Please wait ...').prop('disabled', true); // 补充disabled的布尔值参数
  
  $.ajax({
    url: "/login-user",
    type: "POST",
    data: $('#frm-login').serialize(),
    dataType: "json"
  }).always(function (response) {
    $loginButton.text('Logging in').prop('disabled', false);
    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);
    // 登录成功后直接调用会话恢复函数，统一逻辑
    restoreSession();
  });
});

// 页面加载完成后自动尝试恢复会话
$(document).ready(function() {
  restoreSession();
});

关键修改说明 #

• 把会话恢复逻辑封装成restoreSession函数，登录成功后和页面加载时都调用它，避免代码重复。
• 页面加载阶段（$(document).ready）主动触发会话检查，用sessionStorage里的token重新请求用户数据。
• 修复了原代码里的小bug：比如event.preventDefault()的参数错误、prop('disabled')缺少布尔值。
• 验证失败时主动清除无效token，避免页面一直卡在错误状态。

这样修改后，页面刷新时就会自动用保存的token重新验证用户，获取最新数据并渲染页面，状态就能正常保留啦！

内容的提问来源于stack exchange，提问作者July333