如何在Angular 2/3/4/5中实现登录状态持久化？

我来帮你搞定这个问题～页面刷新后登录状态失效，核心原因是Angular作为单页应用，刷新时整个应用会重新加载，之前存在内存里的Token会被清空。你之前只是把Token存在内存中的请求头对象里，刷新后这个对象就重新初始化了，自然拿不到Token，导致登录状态丢失。

下面是具体的解决方案，分步骤来：

1. 登录成功后将Token持久化存储 #

登录接口返回Token后，不要只存在内存里，还要把它存到localStorage或者sessionStorage中：

• localStorage：Token会长期保存，即使关闭浏览器再打开也还在（适合需要记住登录状态的场景）
• sessionStorage：Token只在当前会话有效，关闭浏览器就会消失（适合临时登录的场景）

示例代码：

// 假设这是你的登录请求处理逻辑
login(userInfo) {
  this.http.post('/api/login', userInfo).subscribe((response: any) => {
    const authToken = response.authtoken;
    // 将Token存入localStorage
    localStorage.setItem('authToken', authToken);
    // 同时更新内存中的请求头（可选，因为后面用拦截器会自动处理）
    this.headers = headersForJSON.set("Authorization", authToken);
  });
}

2. 使用HttpInterceptor统一管理请求头（最优方案） #

手动给每个请求加头太繁琐，用Angular的HttpInterceptor可以自动给所有请求带上Token，而且页面刷新后也能自动读取存储的Token，不用手动处理每个请求。

第一步：创建AuthInterceptor拦截器 #

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 从localStorage读取Token
    const authToken = localStorage.getItem('authToken');
    
    // 如果存在Token，克隆请求并添加Authorization头
    if (authToken) {
      const authorizedRequest = request.clone({
        setHeaders: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'Authorization': authToken
        }
      });
      return next.handle(authorizedRequest);
    }
    
    // 没有Token的话，直接转发原请求
    return next.handle(request);
  }
}

第二步：在AppModule中注册拦截器 #

打开app.module.ts，把拦截器添加到providers中：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor'; // 替换成你的拦截器实际路径

@NgModule({
  // ...其他模块和组件声明
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器并存
    }
  ]
})
export class AppModule { }

3. 退出登录时清理Token #

别忘了在用户退出时，把存储的Token删掉，避免无效Token残留：

logout() {
  // 删除localStorage中的Token
  localStorage.removeItem('authToken');
  // 其他退出逻辑，比如跳转到登录页、清空用户信息等
}

这样处理后，页面刷新时，拦截器会自动从localStorage读取Token并添加到请求头，登录状态就不会失效了～

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