前端主动刷新Token与超时安全退出攻略

一、token的作用

由于http请求是无状态的，是一次性的，请求之间没有任何关系，服务端无法知道请求者的身份，所以需要鉴权，来验证当前用户是否有访问系统的权限。
以oauth2.0授权码模式为例：

每次请求资源服务器时都会在请求头中添加 Authorization: Bearer access_token 资源服务器会先判定token是否有效，假如无效或过期则响应 401 Unauthorize。此时用户处于操作状态，应该主动刷新token包管用户的举动正常举行。
刷新token：利用refresh_token获取新的access_token，利用新的access_token重新发起失败的请求。
二、无感知刷新token方案

2.1 刷新方案

当请求出现状态码为 401 时表明token失效或过期，拦截响应，刷新token，利用新的token重新发起该请求。
假如刷新token的过程中，另有其他的请求，则应该将其他请求也生存下来，等token刷新完成，按顺序重新发起全部请求。
2.2 原生AJAX请求

2.2.1 http工厂函数

1. function httpFactory({ method, url, body, headers, readAs, timeout }) {
2.     const xhr = new XMLHttpRequest()
3.     xhr.open(method, url)
4.     xhr.timeout = isNumber(timeout) ? timeout : 1000 * 60
5. ​
6.     if(headers){
7.         forEach(headers, (value, name) => value && xhr.setRequestHeader(name, value))
8.     }
9.    
10.     const HTTPPromise = new Promise((resolve, reject) => {
11.         xhr.onload = function () {
12.             let response;
13. ​
14.             if (readAs === 'json') {
15.                 try {
16.                     response = JSONbig.parse(this.responseText || null);
17.                 } catch {
18.                     response = this.responseText || null;
19.                 }
20.             } else if (readAs === 'xml') {
21.                 response = this.responseXML
22.             } else {
23.                 response = this.responseText
24.             }
25. ​
26.             resolve({ status: xhr.status, response, getResponseHeader: (name) => xhr.getResponseHeader(name) })
27.         }
28. ​
29.         xhr.onerror = function () {
30.             reject(xhr)
31.         }
32.         xhr.ontimeout = function () {
33.             reject({ ...xhr, isTimeout: true })
34.         }
35. ​
36.         beforeSend(xhr)
37. ​
38.         body ? xhr.send(body) : xhr.send()
39. ​
40.         xhr.onreadystatechange = function () {
41.             if (xhr.status === 502) {
42.                 reject(xhr)
43.             }
44.         }
45.     })
46. ​
47.     // 允许HTTP请求中断
48.     HTTPPromise.abort = () => xhr.abort()
49. ​
50.     return HTTPPromise;
51. }

复制代码

2.2.2 无感知刷新token

1. // 是否正在刷新token的标记
2. let isRefreshing = false
3. ​
4. // 存放因token过期而失败的请求
5. let requests = []
6. ​
7. function httpRequest(config) {
8.     let abort
9.     let process = new Promise(async (resolve, reject) => {
10.         const request = httpFactory({...config, headers: { Authorization: 'Bearer ' + cookie.load('access_token'), ...configs.headers }})
11.         abort = request.abort
12.         
13.         try {                             
14.             const { status, response, getResponseHeader } = await request
15. ​
16.             if(status === 401) {
17.                 try {
18.                     if (!isRefreshing) {
19.                         isRefreshing = true
20.                         
21.                         // 刷新token
22.                         await refreshToken()
23. ​
24.                         // 按顺序重新发起所有失败的请求
25.                         const allRequests = [() => resolve(httpRequest(config)), ...requests]
26.                         allRequests.forEach((cb) => cb())
27.                     } else {
28.                         // 正在刷新token，将请求暂存
29.                         requests = [
30.                             ...requests,
31.                             () => resolve(httpRequest(config)),
32.                         ]
33.                     }
34.                 } catch(err) {
35.                     reject(err)
36.                 } finally {
37.                     isRefreshing = false
38.                     requests = []
39.                 }
40.             }                        
41.         } catch(ex) {
42.             reject(ex)
43.         }
44.     })
45.    
46.     process.abort = abort
47.     return process
48. }
49. ​
50. // 发起请求
51. httpRequest({ method: 'get', url: 'http://127.0.0.1:8000/api/v1/getlist' })

复制代码

2.3 Axios 无感知刷新token

1. // 是否正在刷新token的标记
2. let isRefreshing = false
3. ​
4. let requests: ReadonlyArray<(config: any) => void> = []
5. ​
6. // 错误响应拦截
7. axiosInstance.interceptors.response.use((res) => res, async (err) => {
8.     if (err.response && err.response.status === 401) {
9.         try {
10.             if (!isRefreshing) {
11.                 isRefreshing = true
12.                 // 刷新token
13.                 const { access_token } = await refreshToken()
14. ​
15.                 if (access_token) {
16.                     axiosInstance.defaults.headers.common.Authorization = `Bearer ${access_token}`;
17. ​
18.                     requests.forEach((cb) => cb(access_token))
19.                     requests = []
20. ​
21.                     return axiosInstance.request({
22.                         ...err.config,
23.                         headers: {
24.                             ...(err.config.headers || {}),
25.                             Authorization: `Bearer ${access_token}`,
26.                         },
27.                     })
28.                 }
29. ​
30.                 throw err
31.             }
32. ​
33.             return new Promise((resolve) => {
34.                 // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
35.                 requests = [
36.                     ...requests,
37.                     (token) => resolve(axiosInstance.request({
38.                         ...err.config,
39.                         headers: {
40.                             ...(err.config.headers || {}),
41.                             Authorization: `Bearer ${token}`,
42.                         },
43.                     })),
44.                 ]
45.             })
46.         } catch (e) {
47.             isRefreshing = false
48.             throw err
49.         } finally {
50.             if (!requests.length) {
51.                 isRefreshing = false
52.             }
53.         }
54.     } else {
55.         throw err
56.     }
57. })

复制代码

三、长时间无操作超时主动退出

当用户登录之后，长时间不操作应该做主动退出功能，提高用户数据的安全性。
3.1 操作事件

操作事件：用户操作事件紧张包罗鼠标点击、移动、滚动事件和键盘事件等。
特别事件：某些耗时的功能，比如上传、下载等。
3.2 方案

用户在登录页面之后，可以复制成多个标签，在某一个标签有操作，其他标签也不应该主动退出。所以需要标签页之间共享操作信息。这里我们利用 localStorage 来实现跨标签页共享数据。
在 localStorage 存入两个字段：
名称类型说明说明lastActiveTimestring末了一次触发操作事件的时间戳activeEventsstring[ ]特别事件名称数组 当有操作事件时，将当前时间戳存入 lastActiveTime。
当有特别事件时，将特别事件名称存入 activeEvents ，等特别事件竣事后，将该事件移除。
设置定时器，每1分钟获取一次 localStorage 这两个字段，优先判定 activeEvents 是否为空，若不为空则更新 lastActiveTime 为当前时间，若为空，则利用当前时间减去 lastActiveTime 得到的值与规定值（假设为1h）做比较，大于 1h 则退出登录。
3.3 代码实现

1. const LastTimeKey = 'lastActiveTime'
2. const activeEventsKey = 'activeEvents'
3. const debounceWaitTime = 2 * 1000
4. const IntervalTimeOut = 1 * 60 * 1000
5. ​
6. export const updateActivityStatus = debounce(() => {
7.     localStorage.set(LastTimeKey, new Date().getTime())
8. }, debounceWaitTime)
9. ​
10. /**
11. * 页面超时未有操作事件退出登录
12. */
13. export function timeout(keepTime = 60) {
14.     document.addEventListener('mousedown', updateActivityStatus)
15.     document.addEventListener('mouseover', updateActivityStatus)
16.     document.addEventListener('wheel', updateActivityStatus)
17.     document.addEventListener('keydown', updateActivityStatus)
18. ​
19.     // 定时器
20.     let timer;
21. ​
22.     const doTimeout = () => {
23.         timer && clearTimeout(timer)
24.         localStorage.remove(LastTimeKey)
25.         document.removeEventListener('mousedown', updateActivityStatus)
26.         document.removeEventListener('mouseover', updateActivityStatus)
27.         document.removeEventListener('wheel', updateActivityStatus)
28.         document.removeEventListener('keydown', updateActivityStatus)
29. ​
30.         // 注销token，清空session，回到登录页
31.         logout()
32.     }
33. ​
34.     /**
35.      * 重置定时器
36.      */
37.     function resetTimer() {
38.         localStorage.set(LastTimeKey, new Date().getTime())
39. ​
40.         if (timer) {
41.             clearInterval(timer)
42.         }
43. ​
44.         timer = setInterval(() => {
45.             const isSignin = document.cookie.includes('access_token')
46.             if (!isSignin) {
47.                 doTimeout()
48.                 return
49.             }
50. ​
51.             const activeEvents = localStorage.get(activeEventsKey)
52.             if(!isEmpty(activeEvents)) {
53.                 localStorage.set(LastTimeKey, new Date().getTime())
54.                 return
55.             }
56.             
57.             const lastTime = Number(localStorage.get(LastTimeKey))
58. ​
59.             if (!lastTime || Number.isNaN(lastTime)) {
60.                 localStorage.set(LastTimeKey, new Date().getTime())
61.                 return
62.             }
63. ​
64.             const now = new Date().getTime()
65.             const time = now - lastTime
66. ​
67.             if (time >= keepTime) {
68.                 doTimeout()
69.             }
70.         }, IntervalTimeOut)
71.     }
72. ​
73.     resetTimer()
74. }
75. ​
76. // 上传操作
77. function upload() {
78.     const current = JSON.parse(localStorage.get(activeEventsKey))
79.     localStorage.set(activeEventsKey, [...current, 'upload'])
80.     ...
81.     // do upload request
82.     ...
83.     const current = JSON.parse(localStorage.get(activeEventsKey))
84.     localStorage.set(activeEventsKey, Array.isArray(current) ? current.filter((item) => itme !== 'upload'))
85. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。