vue 设置token有效期

在Vue.js应用中设置token的有效期通常是在客户端管理用户的会话存储，如浏览器的localStorage或者cookie中。你可以创建一个封装了获取、设置和清除token的方法的组件或服务。下面是一个简单的例子：

// 假设我们有一个Vuex store来存储和更新token
import { mapState } from 'vuex'

export default {
  computed: {
    // 使用mapState从store获取token
    token: mapState(['token']),
  },
  methods: {
    /**
     * 设置token的有效期，这里假设通过axios发送请求更新服务器端的过期时间
     */
    setTokenExpiration(date) {
      localStorage.setItem('tokenExpires', date.toISOString());
    },
    
    /**
     * 检查并更新token的有效期
     */
    checkAndRefreshToken() {
      const expirationDate = new Date(localStorage.getItem('tokenExpires'));
      if (expirationDate && expirationDate < new Date()) {
        // 这里可以尝试发送请求刷新token，然后更新本地存储的过期时间
        // axios.get('/refresh-token')...
        this.setTokenExpiration(new Date(Date.now() + EXPIRATION_TIME_IN_MS));
      }
    },
  },
  created() {
    this.checkAndRefreshToken(); // 初始检查
    setInterval(() => this.checkAndRefreshToken(), REFRESH_INTERVAL_IN_MS); // 定时检查
  },
  beforeDestroy() {
    // 在组件销毁前清除token，防止泄露
    localStorage.removeItem('token');
  },
}

在这个例子中，`EXPIRATION_TIME_IN_MS`和`REFRESH_INTERVAL_IN_MS`是你需要定义的时间单位（例如毫秒），`/refresh-token`是你的后端API路径。