接上文 2 楼 Laf 云函数的鉴权，获取 token ，token过期处理
借用 OAuth2.0 access_token 和 refresh_token 的机制，升级下鉴权逻辑，让活跃用户保持不掉线的状态。

刚开始研究后端，各位海涵。如果有更好的方案，请赐教！

原理

登录成功后服务端生成俩 token 给客户端。客户端正常请求时使用 access_token，如果服务端返回登录超时的状态，则客户端拿着 refresh_token 去请求刷新接口，重新签发两个 token，最后客户端拿着新的 access_token 重新请求。

Laf 云函数

// test 函数，就是一个普通的接口，需要鉴权的那种。
export async function main(ctx: FunctionContext) {
  return { user: ctx.user }
}

// 登录接口
import cloud from '@lafjs/cloud'

export async function main(ctx: FunctionContext) {
  const uid = Math.round(Math.random() * 10)  // 假设一个用户 id
  const access_token = cloud.getToken({
    uid,
    message: '鉴权token',
    exp: Math.floor(Date.now() / 1000) + 5
  })
  const refresh_token = cloud.getToken({
    uid,
    message: '刷新token',
    exp: Math.floor(Date.now() / 1000) + 10
  })

  return { code: 20000, data: { access_token, refresh_token } }
}

// 刷新 token 的接口
import cloud from '@lafjs/cloud'

export default async function (ctx: FunctionContext) {
  const tokenInfo = cloud.parseToken(ctx.body.refresh_token)
  if (!tokenInfo) {
    return {
      code: 40101,
      message: '刷新 token 已过期，请重新登录'
    }
  }

  const uid = tokenInfo.uid
  const access_token = cloud.getToken({
    uid,
    message: '鉴权token',
    exp: Math.floor(Date.now() / 1000) + 5
  })
  const refresh_token = cloud.getToken({
    uid,
    message: '刷新token',
    exp: Math.floor(Date.now() / 1000) + 10
  })

  return { code: 20000, data: { access_token, refresh_token } }
}

// 以及最重要的拦截器 __interceptor__
export async function main(ctx: FunctionContext) {
  // 白名单，直接放行
  const whiteList = ['/refresh', '/login']
  if (whiteList.includes(ctx.request.path)) {
    return true
  }
  if (!ctx.user) {
    ctx.response.send({ code: 40100, message: 'token 过期，请刷新 token' })
    return false
  }

  return true
}

最后，是前端实现，基于 axios 拦截器。

import axios from 'axios';

// axios 实例
const instance = axios.create({
  baseURL: import.meta.env.VITE_URL
})
let pending = []  // 队列
let isPending = false

// 刷新token的请求
const refreshToken = () => {
  console.log('请求刷新。。。')
  return instance.post('/refresh', {
    refresh_token: localStorage.getItem('refresh_token')
  })
}

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 判断是否需要携带 token 头信息
    if (config.needToken) {
      // 从本地存储中获取 token
      const token = localStorage.getItem('token');
      if (token) {
        // 将 token 头信息添加到请求头中
        config.headers.Authorization = `Bearer ${token}`;
      }
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    const { code } = response.data
    // 40100 用户身份验证失败
    if (code === 40100) {
      const originalConfig = response.config; // 保存下请求信息
      // 判断队列
      if (isPending) {
        console.log('已经有刷新请求了，先加到队列等着吧。。。')

        return new Promise((resolve) => {
          pending.push((token) => {
            originalConfig.headers['Authorization'] = token
            console.log('执行队列。。。')
            resolve(instance(originalConfig))
          })
        })
      } else {
        console.log('请求40100了，开始刷新token')
        isPending = true
        return refreshToken()
          .then((response) => {
            console.log('刷新token返回内容', response)
            if (response.data.code === 20000) {
              localStorage.setItem('token', response.data.data.access_token)
              localStorage.setItem('refresh_token', response.data.data.refresh_token)
              // 处理队列
              pending.forEach((cb) => cb(response.data.data.refresh_token))
              // 清空队列
              pending = []
              // 带着新token重新发起当前请求
              originalConfig.headers['Authorization'] = response.data.data.refresh_token
              return instance(originalConfig)
            } else if (response.data.code === 40101) {
              console.log('刷新token也过期了，重新登录吧！')
              return response.data
            }

          })
          .catch((error) => {
            console.error(error)
          })
          .finally(() => {
            isPending = false
          })

      }
    } else {
      return response;
    }

  },
  async (error) => {
    return Promise.reject(error);
  }
);