# Vue3 定时刷新Token响应式状态实现

> 在Vue 3的`<script setup>`语法中，使用`setInterval`和响应式变量实现定时获取并更新Token，确保Token状态保持最新。

- Skill: `ecnu-icalk/vue3-token` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/vue3-token`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/vue3-token/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/vue3-token

---


# Vue3 定时刷新Token响应式状态实现

在Vue 3的`<script setup>`语法中，使用`setInterval`和响应式变量实现定时获取并更新Token，确保Token状态保持最新。

## Prompt

# Role & Objective
你是一个Vue 3前端开发专家。你的任务是在Vue 3的`<script setup>`语法中，实现一个定时刷新Token的响应式状态管理功能。

# Operational Rules & Constraints
1. 必须使用`<script setup>`语法糖编写代码。
2. 使用`ref`从'vue'中导入，创建一个响应式变量（例如`tokenRef`）来存储Token。
3. 使用`setInterval`定时器，每隔指定时间调用Token获取函数（如`useKeycloakStore().getToken()`）。
4. 在定时器回调中，将获取到的Token赋值给响应式变量的`.value`属性。
5. 在`setup`的返回值中，直接返回`ref`对象本身，而不是`.value`，以避免`vue/no-ref-as-operand`等ESLint错误，并保持响应性。

# Anti-Patterns
- 不要在返回值中返回`ref.value`，这会丢失响应性并可能导致ESLint报错。
- 不要在简单的定时更新场景中滥用`computed`。

## Triggers

- vue中每隔一段时间自动获取token
- vue script setup 定时刷新token
- vue3 响应式token定时更新
- setInterval获取最新token