优雅实现无感知令牌刷新，让用户体验更丝滑

前端

2024-01-08 02:56:00

无感知令牌刷新：告别烦人的中断，提升用户体验

令牌过期的痛点

令牌是验证用户身份的重要凭证，但它们通常具有有限的有效期。当令牌过期时，用户将被强制重新登录，中断他们的操作流程，带来极大的不便。对于无状态的单页应用和小程序，这个问题尤其棘手，因为它会导致页面闪烁甚至数据丢失。

无感知令牌刷新

无感知令牌刷新是一种巧妙的机制，允许应用在后台刷新令牌，而不会影响用户体验。当令牌接近过期时，应用会自动发起刷新请求。如果刷新成功，令牌将被更新，用户可以继续使用应用，无察觉任何中断。

如何优雅地实现

实现无感知令牌刷新需要巧妙地处理用户操作和网络请求。以下是一些最佳实践：

后台刷新： 将令牌刷新请求放在后台任务中执行，避免影响用户操作的流畅性。

监听令牌过期： 使用计时器或事件监听器监控令牌的剩余有效期，并在接近过期时触发刷新请求。

使用持久化存储： 将刷新后的令牌存储在本地存储或IndexedDB中，以便在应用重新加载后使用。

考虑并行刷新： 如果可能，考虑同时发起多个刷新请求，以提高容错性。

实际案例

小程序：

在小程序中，可以在 app.js 文件中实现无感知令牌刷新：

wx.cloud.init();

const app = getApp();

app.getToken = async () => {
  const token = await wx.getStorageSync('token');
  if (token && !isExpired(token)) {
    return token;
  }
  const res = await wx.cloud.callFunction('login');
  const newToken = res.result.token;
  wx.setStorageSync('token', newToken);
  return newToken;
};

单页应用：

在单页应用中，可以使用 Vuex 或 Redux 等状态管理库来实现无感知令牌刷新：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    token: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    }
  },
  getters: {
    getToken: state => state.token
  },
  actions: {
    async refreshToken({ state, commit }) {
      if (!state.token || isExpired(state.token)) {
        const res = await axios.post('/api/login');
        commit('setToken', res.data.token);
      }
    }
  }
});