封装 axios 拦截器实现用户无感刷新 access_token

前言

最近做项目的时候，涉及到一个单点登录，即是项目的登录页面，用的是公司共用的一个登录页面，在该页面统一处理逻辑。最终实现用户只需登录一次，就可以以登录状态访问公司旗下的所有网站。

单点登录( Single Sign On ，简称 SSO），是目前比较流行的企业业务整合的解决方案之一，用于多个应用系统间，用户只需要登录一次就可以访问所有相互信任的应用系统。

其中本文讲的是在登录后如何管理access_token和refresh_token，主要就是封装 axios拦截器，在此记录。

需求

• 前置场景

1. 进入该项目某个页面 http://xxxx.project.com/profile需要登录，未登录就跳转至SSO登录平台，此时的登录网址 url为 http://xxxxx.com/login?app_id=project_name_id&redirect_url=http://xxxx.project.com/profile，其中 app_id是后台那边约定定义好的， redirect_url是成功授权后指定的回调地址。
2. 输入账号密码且正确后，就会重定向回刚开始进入的页面，并在地址栏带一个参数 ?code=XXXXX，即是 http://xxxx.project.com/profile?code=XXXXXX，code的值是使用一次后即无效，且10分钟内过期
3. 立马获取这个code值再去请求一个api /access_token/authenticate，携带参数 { verify_code: code }，并且该api已经自带 app_id和 app_secret两个固定值参数，通过它去请求授权的api，请求成功后得到返回值 { access_token: "xxxxxxx", refresh_token: "xxxxxxxx", expires_in: xxxxxxxx }，存下 access_token和 refresh_token到cookie中（localStorage也可以），此时用户就算登录成功了。
4. access_token为标准JWT格式，是授权令牌，可以理解就是验证用户身份的，是应用在调用api访问和修改用户数据必须传入的参数（放在请求头headers里），2小时后过期。也就是说，做完前三步后，你可以调用需要用户登录才能使用的api；但是假如你什么都不操作，静静过去两个小时后，再去请求这些api，就会报 access_token过期，调用失败。
5. 那么总不能2小时后就让用户退出登录吧，解决方法�