前后端分离之后处理token过期的做好方式是什么？

Question

我们的项目以前处理token过期是，后端返回一个过期的error code然后前端跳转到登录页。
A页面是一个表单页，提交成功后跳转到B页面

function request(url,data,header) {
 $.ajax({
  url: url,
  type: 'post',
  data: data,
  header: header,//header中带有token
  success: function(data) {
    //code为1时成功
    if(data.code == 1) {
       window.location.href = 'B.html'
    }
    //code为2是 token过期
    if(data.code == 2) {
       window.location.href = 'login.html'
    }
  }
})
}

request('submitUrl',data,header)//执行提交表单

客户感觉这样交互体验太差了，想改为
当token过期时，后端返回一个过期的error code，前端判断后再发送一个更新token的请求之后在发送之前的请求，让用户不做任何操作的情况下完成流程。

function request(url,data,header) {
 $.ajax({
  url: url,
  type: 'post',
  data: data,
  header: header,//header中带有token
  success: function(data) {
    //code为1时成功
    if(data.code == 1) {
       window.location.href = 'B.html'
    }
    //code为2是 token过期
    if(data.code == 2) {
       window.header.token = 
       requestToken(header)//怎样用这个获取的token把之前的请求再执行一次呢
    }
  }
})
}

request('submitUrl',data)//执行提交表单

//刷新token
function requestToken() {
$.ajax({
  url: 'getToken',
  data: data,
  type:'post',
  success: function(data) {
    //code为1时成功
    if(data.code == 1) {
       return data.token
    }
    
  }
})

但是我被一个流程上的问题卡住了，获取了这个更新的token，我如何再把之前的请求发送呢（在不让用户操作的情况下），我这种想法是否可行？

Answer 1

拦截器。

发送请求时全局拦截判断 code 是否为需要刷新token。
如果是 就将会话保存，刷新token后再重发。
或者在刷新 token 接口将当前请求的 Request 一起发过去。后端直接处理，既刷新token 又处理业务并将业务结果返回。但是这样后端一般都不会干。@ω@

Answer 2

改成token永不失效就行

Answer 3

requestToken执行成功之后再执行一下request
比如

function request(url,data,header) {
 $.ajax({
  url: url,
  type: 'post',
  data: data,
  header: header,//header中带有token
  success: function(data) {
    //code为1时成功
    if(data.code == 1) {
       window.location.href = 'B.html'
    }
    //code为2是 token过期
    if(data.code == 2) {
       requestToken(function(token){request(url,data,Object.assign(header,{token}))})
       // window.header.token = requestToken(header)//怎样用这个获取的token把之前的请求再执行一次呢
    }
  }
})
}

request('submitUrl',data)//执行提交表单

function requestToken(cb) {
$.ajax({
  url: 'getToken',
  data: data,
  type:'post',
  success: function(data) {
    //code为1时成功
    if(data.code == 1) {
        if(cb){cb(data.token)}
        return data.token
    }
    
  }
})

Answer 4

换一种方案你看行不行，前端拿到 token 后记录一下时间，然后定时检查还有多久超时，在接近超时的时候去刷新这个 token。

Answer 5

如果过期了直接更新token相当于永不过期，直接不让token过期就好了。
我想你想要的应该是每次token有效的请求都给token续期，这种只要后端每次收到请求自动续期就行了

Answer 6

流程:

1. 发送请求, 记录请求信息
2. token 过期, 返回 40x
3. 重新获取token
   3.1 成功, 重新发送一次记录的请求.
   3.2 失败, 跳转 login, 重新登录.