Angular应用API数据缓存实现：安全性与优化方案问询

问题描述 #

我希望在Angular应用中缓存从API获取的数据，避免用户再次访问页面（例如返回操作）时重新请求内容，同时还希望能保留滚动位置（不确定这种方式是否正确）。

目前我通过在Service中使用BehaviorSubject存储数据，仅当Service中无数据时才发起HTTP请求，否则直接读取缓存数据，并在用户登出时清空Service中的缓存。以下是相关代码：

blogs_storage.service.ts #

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Blog } from './blog.model';

@Injectable({ providedIn: 'root' })
export class BlogStorageService {
  private blogs = new BehaviorSubject<Blog[]>(null);
  private userBlogs = new BehaviorSubject<Blog[]>(null);

  clearStorage() {
    this.blogs.next(null);
    this.userBlogs.next(null);
  }

  getBlogs(): BehaviorSubject<Blog[]> {
    return this.blogs;
  }

  getUserBlogs(): BehaviorSubject<Blog[]> {
    return this.userBlogs;
  }

  storeUserBlogs(blogs: Blog[]): void {
    this.userBlogs.next(blogs);
  }

  storeBlogs(blogs: Blog[]): void {
    this.blogs.next(blogs);
  }
}

blogs.service.ts #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, catchError, exhaustMap, tap, throwError } from 'rxjs';
import { Blog, NewBlog } from './blog.model';
import { BlogStorageService } from './blogs-storage.service';

@Injectable({ providedIn: 'root' })
export class BlogService {
  constructor(
    private http: HttpClient,
    private blogStorage: BlogStorageService
  ) {}

  fetchAllBlogs() {
    const blogs: Blog[] = this.blogStorage.getBlogs().getValue();
    if (blogs) {
      return this.blogStorage.getBlogs().asObservable();
    } else {
      return this.http.get<{ data: Blog[]; status: number }>('blogs').pipe(
        tap((blogs) => {
          this.blogStorage.storeBlogs(blogs.data);
        }),
        exhaustMap(() => {
          return this.blogStorage.getBlogs().asObservable();
        })
      );
    }
  }

  fetchUserBlogs() {
    const blogs: Blog[] = this.blogStorage.getUserBlogs().getValue();
    if (blogs) {
      return this.blogStorage.getUserBlogs().asObservable();
    } else {
      return this.http
        .get<{ data: Blog[]; status: number }>('users/blogs')
        .pipe(
          tap((blogs) => {
            this.blogStorage.storeUserBlogs(blogs.data);
          }),
          exhaustMap(() => {
            return this.blogStorage.getUserBlogs().asObservable();
          })
        );
    }
  }

  fetchBlogBySlug(slug: string) {
    return this.http.get<{ data: Blog; status: number }>(`blogs/${slug}`);
  }

  fetchCategoriesList() {
    return this.http.get<{
      data: { _id: string; title: string; slug: string }[];
      status: number;
    }>('blogs/category-list');
  }

  postblog(data: NewBlog) {
    return this.http.post('blogs/create', data);
  }

  getSavedBlogs() {
    return this.http.get<{ data: Blog[]; status: number }>('users/savedblogs');
  }

  saveBlog(slug: string, alreadySaved: boolean) {
    return this.http.put(
      `users/savedblogs/${slug}/${alreadySaved ? 'unsave' : 'save'}`,
      {}
    );
  }
}

登出时的代码 #

logout() {
  this.user = null;
  this.isAuth.next(false);
  this.blogStorage.storeUserBlogs(null);
  localStorage.removeItem('userData');
  this.router.navigate(['/auth/login']);
}

请问这种清空数据的方式是否安全？是否有更优的实现方案？我刚接触Angular，若当前实现存在缺陷，请指出。

解答 #

一、当前清空方式的安全性问题 #

当前的登出逻辑不安全，存在数据残留风险：

• 你只调用了storeUserBlogs(null)清空用户私有博客缓存，但全局博客缓存blogs并未被清空。由于BlogStorageService是单例服务，缓存数据会留在内存中，若同一浏览器窗口后续有其他用户登录，调用fetchAllBlogs时会直接读取旧缓存，可能导致数据泄露（若全局博客包含敏感信息）或展示过期内容。
• 正确的做法是调用blogStorage.clearStorage()，一次性清空所有缓存数据。

二、当前实现的缺陷 #

1. 缓存逻辑冗余：fetchAllBlogs和fetchUserBlogs中使用exhaustMap转成BehaviorSubject的Observable完全多余，直接返回HTTP请求的数据流或缓存数据即可，无需绕Subject。
2. 同步取值风险：使用getValue()同步获取BehaviorSubject的值，虽然当前场景下问题不大，但如果缓存数据是异步更新的，可能拿到过时或错误的值。
3. 无缓存失效机制：当数据发生更新（比如用户发布新博客），现有缓存不会自动刷新，用户会看到旧内容，必须手动清空缓存才能获取最新数据。
4. 滚动位置未处理：当前代码未涉及滚动位置保存，需要单独实现。

三、优化方案 #

1. 完善登出清空逻辑

修改登出代码，调用clearStorage()确保所有缓存清空：

logout() {
  this.user = null;
  this.isAuth.next(false);
  this.blogStorage.clearStorage(); // 替换单独清空userBlogs的逻辑
  localStorage.removeItem('userData');
  this.router.navigate(['/auth/login']);
}

2. 简化缓存获取逻辑

重构fetchAllBlogs和fetchUserBlogs，去掉冗余的exhaustMap，直接返回数据Observable：

// blogs.service.ts
fetchAllBlogs(): Observable<Blog[]> {
  const cachedBlogs = this.blogStorage.getBlogs().value;
  if (cachedBlogs) {
    return of(cachedBlogs); // 直接返回缓存数据的Observable
  }
  return this.http.get<{ data: Blog[]; status: number }>('blogs').pipe(
    tap(response => this.blogStorage.storeBlogs(response.data)),
    map(response => response.data) // 直接返回API数据
  );
}

fetchUserBlogs(): Observable<Blog[]> {
  const cachedBlogs = this.blogStorage.getUserBlogs().value;
  if (cachedBlogs) {
    return of(cachedBlogs);
  }
  return this.http.get<{ data: Blog[]; status: number }>('users/blogs').pipe(
    tap(response => this.blogStorage.storeUserBlogs(response.data)),
    map(response => response.data)
  );
}

3. 添加缓存失效机制

在数据更新操作后主动清空对应缓存，比如发布新博客后清空全局博客缓存：

postblog(data: NewBlog): Observable<any> {
  return this.http.post('blogs/create', data).pipe(
    tap(() => {
      // 发布成功后清空全局博客缓存，确保下次获取最新数据
      this.blogStorage.storeBlogs(null);
    })
  );
}

4. 滚动位置保存方案

Angular自带路由滚动恢复功能，只需在路由配置中开启：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [/* 你的路由配置 */];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled' // 开启路由滚动恢复
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果需要更精细的控制（比如特定页面保存滚动位置），可以在组件中手动存储和恢复：

// 博客列表组件
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-blog-list',
  templateUrl: './blog-list.component.html',
  styleUrls: ['./blog-list.component.css']
})
export class BlogListComponent implements OnInit, OnDestroy {
  private scrollPosition = 0;

  ngOnInit(): void {
    // 恢复滚动位置
    window.scrollTo(0, this.scrollPosition);
  }

  ngOnDestroy(): void {
    // 保存滚动位置
    this.scrollPosition = window.scrollY;
  }
}

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