关于实现token无感刷新的解决方案

问题引入

在开发中为了安全或满足分布式场景，通常会舍弃原有的session认证手段，而采用jwt(json web token)；但是使用token难免遇到token有效期的问题，如果token长期有效，服务端不断发布新的token，导致有效的token越来越多，这必然是存在安全问题的。而token不想session一样，在用户操作时会进行刷新，为了用户体验，这个刷新就需要自己实现。

方案

一、使用旧token获取新token

如果采取单个token的方式要实现token的自动刷新，就必须使用定时器，每隔一段时间自动刷新token，并且这个时候token一定要是没有过期的，因为如果已经过期的token也可以用来刷新，这和长期有效的token也没什么不同。但这种方式存在一定的问题：

1. 为了保证同一时间，账户只被单个用户登录，后端必然要保证一个账户的多个token只有一个生效，最简单的方式就是使用分布式缓存中间件如redis，而存在并发请求时，可能前一个请求带着的是旧token，此时又到了刷新token的时间，就会产生请求的token与服务端存储的token不一致的问题
2. 使用定时器是增加了性能的损耗，不是最佳的手段

二、使用双token的方式进行无感刷新

这里重点介绍这种方式，此方案的大致流程为：登录后客户端收到两个token(access_token,refresh_token)，其中access_token用来鉴定身份，而refresh_token用来刷新access_token；这就要求了refresh_token要比access_token有效时间要长，并且refresh_token不能用来鉴定身份
使用这种方案又有一下解决方式：

1. 后端每次响应都响应一个token过期时间，前端进行判断，在token过期前进行刷新，这种方式存在太多不可控因素，如客户端系统时间被修改、长时间没请求导致token过期却未刷新，无法做到无感刷新，并且也存在并发问题
2. 使用定时器，使用定时器增加的资源的损耗，亏损了性能，不推荐
3. 在得到token过期的请求时，再发送refresh_token；有点懒加载的意思，这种方案性能最优

具体实现(方案二的第三种方式)

流程

再理一理程序运行的流程：

1. 首先，登录得到了两个token，并将其存起来
2. 当access_token过期时，自动发送refresh_token到刷新token的请求路径请求token刷新
3. 得到新的token之后，将请求重新发送，实现用户无感刷新token

代码

用到的工具函数

//判空
let isEmpty = function(obj) {
    return obj == null || obj == "undefined" || obj == "null" || new String(obj).trim() == '';
};
1
2
3
4

1. 封装axios

const my_axios = axios.create({
    baseURL: '/app',
    timeout: 15000,
    withCredentials: true
});
1
2
3
4
5

这里对axios做一个简单的封装，不做过多赘述

2. 定义请求拦截器，将请求带上token

my_axios.interceptors.request.use(
        req => {
        	//判断当前是否存在tokenBo(tokenBo即两个token组成的对象)，存在则带上token
        	//isEmpty函数在上方的工具函数中
            if (!isEmpty(sessionStorage.getItem("tokenBo"))) {
            	//通过请求路径中是否含有refershToken来判断当前是一般请求还是token刷新请求；从而在请求头中带上不同的token
                if (-req.url.indexOf("refreshToken") == 1) {
                    req.headers['accessToken'] = JSON.parse(sessionStorage.getItem("tokenBo")).accessToken;
                } else {
                    req.headers['refreshToken'] = JSON.parse(sessionStorage.getItem("tokenBo")).refreshToken;
                }
            }
            return req;
        },
        err => {
            return Promise.reject(err)
        }
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 响应拦截，进行token的无感刷新
   这是最难的一步，我们需要考虑到几个问题，第一：要实现无感，那么用户的请求就不能被舍弃，而是需要在得到新的token后帮他再执行一次；第二，当同时出现多个请求时，可能会导致多次刷新token的情况，所以需要用一个标志量来标志是否正在刷新token，并使用一个数据对请求进行存储

//标志当前是否正在刷洗token
let isNotRefreshing = true;
//请求队列
let requests = [];
my_axios.interceptors.response.use(
    async res => {
    	//我们可以定义一个标准响应体，比如：{code=10415,msg='token已过期',data:null}，当收到token过期的响应就要进行token刷新了
        if (res.data.code == 10415) {
        	//首先拿到响应的配置参数，这和请求的配置参数是一样的，包括了url、data等信息，待会需要使用这个config来进行重发
            const config = res.config;
            //如果当前不处于刷新阶段就进行刷新操作
            if (isNotRefreshing) {
                isNotRefreshing = false;
                //返回刷新token的回调的返回值，本来考虑到由于请求是异步的，所以return会先执行，导致返回一个undefined，那么就需要使用async+await，但实际上没有加也成功了
                return my_axios.get("/admin/refreshToken")
                    .then(res => {
                    	//如果token无效或token仍然过期，就只能重新登录了
                        if (res.code == 10422 || res.code == 10415) {
                            sessionStorage.removeItem("tokenBo");
                            sessionStorage.removeItem("currentAdmin");
                            location.href = '/login';
                        } else if (res.code == 10200) {
                        	//刷新成功之后，将新的token存起来
                            sessionStorage.setItem("tokenBo", JSON.stringify(res.data))
                            //执行requests队列中的请求，（requests中存的不是请求参数，而是请求的Promise函数，这里直接拿来执行就好）
                            requests.forEach(run => run())
                            //将请求队列置空
                            requests = []
                            //重新执行当前未执行成功的请求并返回
                            return my_axios(config);
                        }
                    })
                    .catch(() => {
                        sessionStorage.removeItem("tokenBo");
                        sessionStorage.removeItem("currentAdmin");
                        location.href = '/';
                    })
                    .finally(() => {
                        isNotRefreshing = true;
                    })
            } else {
            	//如果当前已经是处于刷新token的状态，就将请求置于请求队列中，这个队列会在刷新token的回调中执行，由于new关键子存在声明提升，所以不用顾虑会有请求没有处理完的情况，这段添加请求的程序一定会在刷新token的回调执行之前执行的
                return new Promise(resolve => {
                	//这里加入的是一个promise的解析函数，将响应的config配置对应解析的请求函数存到requests中，等到刷新token回调后再执行
                    requests.push(() => {
                        resolve(my_axios(config));
                    })
                })
            }
        } else {
            if (res.data.code == 10200) {
            	requests = [];
                return res.data;
            } else {
                if (res.data.code == 10409) {
                    sessionStorage.removeItem("tokenBo");
                    sessionStorage.removeItem("currentAdmin");
                    location.href = "/#/login"
                }
                Message.error(res.data.message);
                return res.data;
            }
        }

    },
    err => {
        if (err && err.response && err.response.status) {
            switch (err.response.status) {
                case 404:
                    Message.error("页面未找到");
                    break;
                case 401:
                    Message.error('没有权限访问')
                    break;
                case 500:
                    Message.error("系统维护中")
                    break;
                case 505:
                    Message.error("网络错误")
            }
        }
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83