Flask+Vue采用Cookie认证时refresh token刷新失效问题求助

问题根本原因 #

1. CSRF头不匹配 #

你在拦截器中修改authServ.defaults.xsrfCookieName的逻辑存在时序问题：axios的请求配置会在调用post方法时就基于当前默认值生成，你修改全局默认值的操作和post('/refresh')的调用几乎同时执行，实际发往刷新接口的POST请求携带的还是旧的X-CSRF-TOKEN-ACCESS对应的CSRF头，而Flask的刷新接口要求校验X-CSRF-TOKEN-REFRESH头，校验不通过直接返回401。
此外这种修改全局配置的方式如果遇到多个请求同时触发过期刷新，会出现配置竞态，导致其他普通请求携带错误的CSRF头，引发更多401问题。

2. 为什么改成GET就正常 #

Flask生态的CSRF校验默认仅针对POST、PUT、DELETE等修改类请求生效，GET请求默认不做CSRF校验。你把刷新接口改成GET方法后，服务端跳过了CSRF头校验，只要请求携带的refresh cookie有效就能正常执行，所以问题被临时修复。但这种做法不符合安全规范，GET请求不应该执行凭证修改类操作，容易出现CSRF漏洞。

正确修复方案 #

不要修改全局xsrfCookieName配置，给刷新请求单独指定对应的CSRF配置即可，避免全局配置冲突和时序问题：

// 拦截器中刷新token的逻辑替换为下面的写法
error.config.retry = true;
// 单独给刷新请求传xsrf配置，不修改全局默认值
await authServ.post('/refresh', {}, {
  xsrfCookieName: 'X-CSRF-TOKEN-REFRESH',
  xsrfHeaderName: 'X-CSRF-TOKEN-REFRESH'
})
return authServ(error.config);

保持刷新接口为POST方法即可，符合REST规范和安全要求。

内容的提问来源于stack exchange，提问作者TheSaltyOne