You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

Flutter Web如何在浏览器后台调用Refresh Token REST API?

解决Flutter Web后台定时刷新Token的问题

针对你遇到的Flutter Web窗口最小化时Timer暂停导致Refresh Token失效的问题,有以下几个可行的解决方案:

1. 改用浏览器原生定时器setInterval

Flutter的Timer在Web环境下会受页面可见性影响被暂停,而浏览器原生的setInterval即使在后台也会以节流的方式运行(Chrome等主流浏览器后台定时器最小间隔为1秒,3分钟的周期完全可以满足)。你可以通过dart:js库直接调用JS的定时器:

import 'dart:js' as js;

void startRefreshTokenTimer() {
  // 每3分钟调用一次刷新接口
  js.context.callMethod('setInterval', [
    () {
      _callRefreshTokenApi();
    },
    3 * 60 * 1000, // 3分钟毫秒数
  ]);
}

void _callRefreshTokenApi() {
  // 这里写你的Refresh Token API调用逻辑
}

注意:用户登出时要调用clearInterval清除定时器,避免内存泄漏。

2. 监听页面可见性变化,主动触发刷新

利用浏览器的Page Visibility API,监听页面从后台恢复到前台的事件,此时立即检查Token状态,若需要则手动刷新:

import 'dart:html' as html;

void initPageVisibilityListener() {
  html.document.addEventListener('visibilitychange', (event) {
    if (!html.document.hidden) {
      // 页面恢复可见,检查Token是否需要刷新
      _checkAndRefreshToken();
    }
  });
}

void _checkAndRefreshToken() {
  // 判断当前Token剩余有效期,若不足(比如小于5分钟)则调用刷新接口
  // 同时确认用户无操作超时时间未到
  bool needRefresh = _isTokenExpiringSoon();
  bool isUserActive = _isUserStillActive();
  
  if (needRefresh && isUserActive) {
    _callRefreshTokenApi();
  }
}

bool _isTokenExpiringSoon() {
  // 实现Token过期判断逻辑
  return true;
}

bool _isUserStillActive() {
  // 检查无操作超时是否未触发
  return true;
}

3. 优化无操作超时与Token刷新的联动逻辑

将无操作超时的重置逻辑和Token刷新结合:

  • 用户每次操作时,不仅重置15分钟的无操作计时器,同时检查Token剩余时间,若剩余时间小于刷新周期(比如3分钟),立即触发一次刷新
  • 页面恢复可见时,先判断无操作超时是否还在有效期内,若有效则直接检查并刷新Token,避免提前登出

示例代码:

DateTime _lastUserActionTime = DateTime.now();
Timer? _inactivityTimer;

void resetInactivityTimer() {
  _lastUserActionTime = DateTime.now();
  _inactivityTimer?.cancel();
  _inactivityTimer = Timer(const Duration(minutes: 15), () {
    // 用户无操作超时,执行登出逻辑
    _logoutUser();
  });
  
  // 同时检查Token是否需要刷新
  _checkAndRefreshToken();
}

void _logoutUser() {
  // 登出逻辑,清除定时器、Token等
}

这样即使后台定时器暂停,用户操作或页面恢复时都会主动维护Token的有效性,避免提前登出的问题。

内容的提问来源于stack exchange,提问作者Dhanraj Verma

火山引擎 最新活动