页面刷新时如何保留Angular中AuthService的登录状态变量值

这个问题其实很常见——内存里的变量在页面刷新时会被重置，因为整个Angular应用会重新初始化，服务也会从头创建，所以你的loggedin变量自然回到了初始的false。要解决这个问题，我们需要把认证状态持久化到浏览器的存储中，比如localStorage或者sessionStorage。

具体修改方案 #

我们可以把loggedin的状态和浏览器存储绑定，每次登录/登出操作时同步更新存储，服务初始化时从存储中读取状态：

• 服务初始化时读取存储状态：不再硬编码loggedin = false，而是从localStorage中读取已有的认证状态
• 登录时同步存储：调用login()时，不仅修改内存变量，还要把状态写入localStorage
• 登出时清除存储：调用logout()时，同时移除localStorage中的认证状态
• 更新认证判断方法：isAuthenticated()直接从存储中获取最新状态（或者结合内存变量，保持一致性）

修改后的AuthService代码 #

export class AuthService {
  // 初始化时从localStorage读取状态，默认false
  loggedin = localStorage.getItem('isLoggedIn') === 'true';

  isAuthenticated() {
    // 直接返回存储中的值，确保和持久化状态一致
    return localStorage.getItem('isLoggedIn') === 'true';
  }

  login() {
    this.loggedin = true;
    localStorage.setItem('isLoggedIn', 'true');
  }

  logout() {
    this.loggedin = false;
    localStorage.removeItem('isLoggedIn');
    // 也可以用 localStorage.setItem('isLoggedIn', 'false')，看个人习惯
  }
}

额外说明 #

• 如果希望关闭浏览器后认证状态自动失效，可以用sessionStorage替代localStorage，两者API完全一致，只是存储时效不同：
  • localStorage：持久化存储，除非手动清除，否则一直存在
  • sessionStorage：会话级存储，关闭当前标签页后就会被清除
• 你的AuthGuard代码不需要修改，因为它依赖的isAuthenticated()已经能正确获取持久化后的状态了
• 注意：浏览器存储只能存字符串，所以我们用'true'/'false'来表示布尔值，读取时要做类型转换

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