共计 1532 个字符，预计需要花费 4 分钟才能阅读完成。
背景
笔者在做的一个我的项目之前的登录接口是实习生写的，登录设计就是简略的提交用户名明码获取 token，而后 token 的过期工夫巨长是 30 天，于是乎另一位工作年限长一点的共事批改了代码，变成了登录获取两个 token：
1.accessToken: 真正用来获取数据的权限
2.refreshToken: 用来获取 accessToken
为什么须要双 token?
总所周知，token 是为了避免用户信息传来传去导致被劫持，然而如果 token 没有过期工夫或者过期很长，那么显然 token 被劫持还是不平安的，token 就失去了意义。
所以这时候大家必定都想：那么把 token 过期工夫设置的短一点就行啦？
是的，一般来讲 accessToken 的过期工夫应该要短一点，然而这时候对于用户来讲就麻烦了。
因为 token 过期就意味着要从新登录，设想下你正浏览的好好的，忽然让你掉线了并且要求你从新登录，心里必定是想骂人的。
什么时候须要用户从新登录？
次要有三种状况：
1. 用户长时间无操作，也能够定义未不沉闷用户，就会被主动踢下，主动重定向到登录页面，超时工夫能够自定义设置；
2.token 生效，通常是双 token 都生效后，会要求从新登录获取新的双 token；
3. 当检测到有危险的时候，能够要求从新登录，获取 token；
因而这时候就能够应用双 token 的设计，当两个 token 都过期了再要求用户从新登录，对于 refreshToken，它只用来获取 accessToken, 不会频繁被用于申请，对于 accessToken，它过期工夫十分短，即便被拦挡了解密也须要工夫，而 token 自身也很快过期，因而这样的设计更加平安。
那么就这样就大快人心了吗？显然不是作为前端，咱们还须要实现让用户对于应用 refreshToken 获取 accessToken 的操作是无感的，这样能力既保证更加平安正当，也不影响用户体验。
如何实现 refreshToken 获取 token 无感刷新?
总的来说个别有三种办法：
1. 通过后端返回过期工夫，前端依据以后工夫与这个过期工夫做判断, 去调用刷新 token 接口
毛病：须要后端额定提供一个 Token 过期工夫的字段；应用了本地工夫判断，若本地工夫被篡改，特地是本地工夫比服务器工夫慢时，拦挡会失败。
2. 定时工作，定时应用 refreshToken 获取 accessToken
浪费资源, 耗费性能, 不倡议采纳。
3. 做响应拦截器中拦挡，后端判断 token 返回过期后，调用刷新 token 接口
比拟好的计划，也是我在我的项目中应用的计划，并且 axios 有做响应拦挡的 api
这里贴一个简略的实现 demo:
import axios from ‘axios’;
axios.interceptors.response.use(res => {
// token 异样
if (res.data.code === 409) {deleteToken();
router.push('/login')
return Promise.reject();
// 更新 Token
} else if (res.data.code === 410) {const {token} = res.data
setToken(token);// 重置 token
}
return res && res.data
})
复制代码
总结
为了用户平安因而要应用 token 设计，为了解决用户频繁登录，采纳双 token 设计，同时前端也须要做肯定解决。
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: https://gitee.com/ZhongBangKe… 不胜感激！