如何实现LocalStorage存Token留驻Dashboard，否则跳转Login并解决刷新问题

核心问题分析 #

页面持续刷新通常是因为跳转逻辑被重复触发，比如Dashboard页面在有token时仍执行跳转，或是Login页面检测到token后跳回Dashboard，形成循环跳转。

Dashboard页面修正代码 #

在Dashboard页面的脚本中，仅在无token时执行跳转，且跳转后终止后续代码：

// Dashboard页面的token检查逻辑
document.addEventListener('DOMContentLoaded', function() {
  const token = localStorage.getItem('access_token');
  // 仅当token不存在时跳转至Login页面
  if (!token) {
    window.location.href = '/login.html';
    return; // 终止后续代码执行，避免冗余操作
  }
  // 有token时执行Dashboard页面的正常业务逻辑
  // 例如渲染用户信息、加载页面数据等
});

Login页面修正代码 #

Login页面需反向检查：若已有token，直接跳转回Dashboard，避免循环：

// Login页面的token检查逻辑
document.addEventListener('DOMContentLoaded', function() {
  const token = localStorage.getItem('access_token');
  // 若已存在token，直接跳转至Dashboard页面
  if (token) {
    window.location.href = '/dashboard.html';
    return;
  }
  // 无token时执行Login页面的正常业务逻辑
  // 例如绑定登录表单提交事件、处理登录请求等
});

关键注意事项 #

• 确保两个页面的跳转路径正确，避免因路径错误导致404后触发刷新循环
• 不要将检查逻辑放在会重复执行的函数中，避免多次触发跳转
• 可给localStorage的token键名添加统一前缀（如myapp_access_token），避免与其他存储项冲突

内容的提问来源于stack exchange，提问作者f180111 Yousaf Zahid