Angular中如何从localStorage的嵌套数组中提取access和refresh token值

核心原因 #

localStorage 仅支持存储字符串类型数据，直接存入对象/数组时，JS会自动将其转换为字符串格式，导致无法直接读取嵌套属性。

1 先修正存储逻辑 #

存入非字符串类型数据时，需先通过JSON.stringify()序列化为标准JSON字符串，修改登录成功后的存储代码：

let authObservable: Observable<any>;
authObservable = this._authService.login(this.f.email.value, this.f.password.value);
authObservable.subscribe(
  result=> {
    localStorage.setItem('id', result['id']);
    localStorage.setItem('username', result['username']);
    localStorage.setItem('email', result['email']);
    // 嵌套对象转JSON字符串后再存储
    localStorage.setItem('tokens', JSON.stringify(result['tokens'])); 
  }
)

2 读取时反序列化 #

取出数据时用JSON.parse()将JSON字符串转回原始对象，即可直接读取内部属性：

// 读取并转成对象，空值时默认给空对象避免解析报错
const tokens = JSON.parse(localStorage.getItem('tokens') || '{}');
// 直接读取属性，可选加空值兼容
const access_token = tokens?.access ?? '';
const refresh_token = tokens?.refresh ?? '';

严谨容错写法（推荐） #

增加异常捕获避免无效JSON数据导致页面崩溃：

let access_token = '';
let refresh_token = '';
try {
  const tokensStr = localStorage.getItem('tokens');
  if (tokensStr) {
    const tokens = JSON.parse(tokensStr);
    access_token = tokens.access || '';
    refresh_token = tokens.refresh || '';
  }
} catch (err) {
  // 解析失败时清空无效的旧存储
  localStorage.removeItem('tokens');
}

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