鸿蒙Next开发中获取token后如何全局保存并在不同页面共享

在鸿蒙Next开发中，获取到token后应该如何全局保存，并在不同页面之间共享使用？目前尝试过将token存在AppStorage里，但在跳转页面时偶尔会出现读取不到的情况。有没有更可靠的实现方案？比如通过AbilityContext或ServiceAbility管理，或者有其他推荐的最佳实践？

2 回复

简单！把token塞进全局变量或状态管理里，比如用AppStorage、LocalStorage或者全局单例。这样每个页面都能愉快地“蹭”到token，不用重复登录啦！

更多关于鸿蒙Next开发中获取token后如何全局保存并在不同页面共享的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next开发中，可以通过以下方式全局保存token并在不同页面共享：

1. 使用AppStorage全局状态管理

// 在App.ets或全局文件中
import { AppStorage } from '@ohos/data/preferences';

// 保存token到AppStorage
export function saveToken(token: string): void {
  AppStorage.setOrCreate('userToken', token);
}

// 获取token
export function getToken(): string {
  return AppStorage.get<string>('userToken') || '';
}

// 清除token
export function clearToken(): void {
  AppStorage.setOrCreate('userToken', '');
}

2. 创建全局状态管理类

// TokenManager.ets
import { AppStorage } from '@ohos/data/preferences';

export class TokenManager {
  private static instance: TokenManager;
  private tokenKey: string = 'userToken';

  public static getInstance(): TokenManager {
    if (!TokenManager.instance) {
      TokenManager.instance = new TokenManager();
    }
    return TokenManager.instance;
  }

  // 保存token
  setToken(token: string): void {
    AppStorage.setOrCreate(this.tokenKey, token);
  }

  // 获取token
  getToken(): string {
    return AppStorage.get<string>(this.tokenKey) || '';
  }

  // 检查是否有token
  hasToken(): boolean {
    return !!this.getToken();
  }

  // 清除token
  clearToken(): void {
    AppStorage.setOrCreate(this.tokenKey, '');
  }
}

3. 在不同页面中使用

// 在任意页面中
import { TokenManager } from '../utils/TokenManager';

@Entry
@Component
struct HomePage {
  @StorageLink('userToken') userToken: string = '';

  aboutToAppear() {
    // 方式1：直接使用StorageLink
    console.log('当前token:', this.userToken);
    
    // 方式2：使用TokenManager
    const token = TokenManager.getInstance().getToken();
    console.log('通过Manager获取token:', token);
  }

  build() {
    Column() {
      Text(`Token: ${this.userToken}`)
        .fontSize(16)
    }
  }
}

4. 登录成功后保存token

// 登录页面
import { TokenManager } from '../utils/TokenManager';

async function login(username: string, password: string) {
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username, password })
    });
    
    const result = await response.json();
    
    if (result.success) {
      // 保存token到全局状态
      TokenManager.getInstance().setToken(result.data.token);
      
      // 或者直接使用AppStorage
      AppStorage.setOrCreate('userToken', result.data.token);
    }
  } catch (error) {
    console.error('登录失败:', error);
  }
}

优势说明

  • AppStorage：系统提供的全局状态管理，自动同步到所有页面
  • 响应式更新：使用@StorageLink装饰器，token变化时页面自动更新
  • 类型安全：TypeScript支持，提供良好的类型提示
  • 持久化：AppStorage支持数据持久化存储

这种方式确保了token在整个应用生命周期内可访问，并且任何页面的token更新都会自动同步到其他页面。

回到顶部