CookieAuthenticationProvider令牌在长表单填写时过期，需基于页面活动刷新

针对长表单填写超时导致认证过期的问题，结合你的.NET 4.8 MVC + Vue/JS技术栈，可通过以下几种方案解决：

1. 前端心跳保活机制 #

定时向后端发送轻量请求触发Cookie刷新，适合用户长时间填写表单但无频繁操作的场景：

前端实现（Vue示例） #

export default {
  data() {
    return {
      refreshTimer: null,
      refreshInterval: 15 * 60 * 1000 // 15分钟刷新一次（小于20分钟过期时间）
    };
  },
  mounted() {
    this.startRefreshTimer();
    // 监听页面可见性，优化性能
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        this.stopRefreshTimer();
      } else {
        this.startRefreshTimer();
      }
    });
  },
  beforeUnmount() {
    this.stopRefreshTimer();
  },
  methods: {
    startRefreshTimer() {
      this.refreshTimer = setInterval(() => {
        this.refreshAuth();
      }, this.refreshInterval);
    },
    stopRefreshTimer() {
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer);
        this.refreshTimer = null;
      }
    },
    async refreshAuth() {
      try {
        await axios.get('/api/Account/RefreshAuth', { withCredentials: true });
      } catch (err) {
        console.error('认证刷新失败:', err);
        // 刷新失败可提示用户重新登录
      }
    }
  }
};

后端实现（MVC Action） #

[Authorize]
public class AccountController : Controller
{
    public ActionResult RefreshAuth()
    {
        // 无需额外逻辑，授权请求会触发SlidingExpiration自动刷新Cookie过期时间
        return new HttpStatusCodeResult(HttpStatusCode.OK);
    }
}

2. 表单交互触发刷新 #

监听表单的输入、选择等操作，防抖后触发刷新请求，仅在用户操作时刷新，更高效：

前端实现（Vue示例） #

import _ from 'lodash';

export default {
  methods: {
    // 防抖处理，1分钟内仅触发一次刷新
    debouncedRefreshAuth: _.debounce(async function() {
      try {
        await axios.get('/api/Account/RefreshAuth', { withCredentials: true });
      } catch (err) {
        console.error('认证刷新失败:', err);
      }
    }, 60 * 1000),
    handleFormInteraction() {
      this.debouncedRefreshAuth();
    }
  }
};

在表单元素上绑定事件：

<form>
  <input type="text" @input="handleFormInteraction" />
  <select @change="handleFormInteraction">...</select>
  <textarea @input="handleFormInteraction"></textarea>
</form>

3. 提交前预检查兜底 #

在表单提交前先执行认证刷新，确保提交时Cookie有效：

前端实现（Vue示例） #

export default {
  methods: {
    async submitForm() {
      try {
        // 先刷新认证
        await axios.get('/api/Account/RefreshAuth', { withCredentials: true });
        // 再提交表单
        await axios.post('/api/Form/Submit', this.formData, { withCredentials: true });
        // 提交成功逻辑
      } catch (err) {
        if (err.response?.status === 401) {
          alert('登录已过期，请重新登录后提交');
        } else {
          console.error('表单提交失败:', err);
        }
      }
    }
  }
};

关键配置说明 #

你的现有认证配置中：

• SlidingExpiration = true：只要在Cookie过期时间的窗口内有授权请求，就会自动延长Cookie过期时间
• AllowRefresh = true：允许Cookie刷新操作
• 心跳/交互触发的授权请求会触发OnResponseSignIn更新ExpiresUtc，确保Cookie有效期被重置

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