token 机制和实现方式


Posted in Javascript onDecember 15, 2020

前言

之前在面试的时候被问到过刷新 token 的问题,其实我对 token 验证机制的细节一直不清楚。新项目和后端的同学商量后使用刷新 token 来实现。本文主要分享一下对 token 机制的理解和实现方式。

登录验证的方式

登录验证一般来说有两个目的,一个是为了安全,一个是为了用户方便。因为 HTTP 是无状态的,所以后端在接受到请求之后并不能知道请求是从哪里来的,但是很多时候我们有验证用户身份的需求,同时前端又有保存用户登录状态的需求。而如果将用户信息保存在前端,必然是非常危险的,很容易被获取,所以就有了在后端进行非对称加密的方式来实现登录的验证和保存。

目前主要的登录验证方式有 cookie + session,token,单点登录和 OAuth 第三方登录。本文我们主要讲一讲 token 登录验证。

什么是 token

token 直译就是令牌的意思,其实就是后端将用户信息进行非对称加密,然后将加密后的内容保存在前端,当发送请求的时候带上这个令牌来实现身份验证。大致的过程是第一次登录用户输入用户名和密码,服务器验证无误后会对用户的信息进行非对称加密生成一个令牌返回给前端,前端可以存入 cookie 或者 localStorage 等,以后每次发送请求带上这个令牌,后端通过对令牌的验证来识别用户的身份以及请求的合法性。

token 的优点是服务端不需要保存 token,只需要验证前端传过来的 token 即可,所以几遍是分布式部署也可以使用这种方式。token 的缺点就是,由于服务器不保存 session 状态,因此无法在使用过程中废止某个 token,或者更改 token 的权限。也就是说,一旦 token 签发了,在到期之前就会始终有效,除非服务器部署额外的逻辑。

目前比较常用的 token 加密方式是 JWT JSON Web Token,关于 JWT 可以参考阮一峰老师的 JSON Web Token 入门教程

token 刷新

按照上面的 token 逻辑,前端只要保存一个后端传过来的 token,每次请求附上即可。当令牌过期有两种选择,我们可以让用户冲洗你登录,或者后端生成一个新的令牌,前端保存新的令牌并重新发送请求。但是这两种方式都有问题,如果让用户重新登录,用户体验不是很好,频繁的重新登录并不是一种比较好的交互方式。而如果自动生成新的令牌则会出现安全问题,比如黑客获取了一个过期的令牌并向后端发送请求,则也可以获得一个更新的令牌。

为了权衡上面的问题,产生了一种刷新 token 的机制,当用户第一次登录成功,后端会返回两个 token,一个 accessToken 用来进行请求,也就是我们每次请求都附上 accessToken,而 refreshToken 则是用来在 accessToken 过期的时候进行 accessToken 的刷新。一般来说,accessToken 由于每次请求都会附上,所以安全风险比较高,所以过期时间较短,而 refreshToken 则只有在 accessToken 过期的时候才会发送到后端,所以安全风险相对较低,所以过期时间可以长一点。

当我们的 accessToken 过期之后,我们会向后端的 token 刷新接口请求并传入 refreshToken,后端验证梅雨问题之后会给我们一个新的 accessToken,我们保存后就可以保证访问的连续性。当然,这也并非绝对安全的,只是一种相对安全一点的做法。一般我们将两个 token 保存在 localStorage 中。

刷新 token 的实现

在项目中我主要使用的是 axios,所以 token 的刷新以及请求附带 token 都是使用的 axios 的拦截器完成的。这其中需要注意的地方有三点:

  1. 不要重复刷新 token,即一个请求已经刷新 token 了,此时可能新的 token 还没有回来,其他请求不应该重复刷新。
  2. 当新的 token 还没有回来的时候,其他的请求应该进行暂存,等新的 token 回来以后再一次进行请求。
  3. 如果请求是由登录页面或者请求本身就是刷新 token 的请求则不需要拦截,否则会陷入死循环。

第一个问题用一个 Boolean 字段加锁即可,第二个问题将请求新 token 过程中发起的请求用状态为 pendding 的 Promise 进行暂存,放到一个数组中,当新的 token 回来的时候依次 resolve 每一个 pendding 的 Promise 即可。具体的代码细节我直接贴上项目上的源码:

import axios, * as AxiosInterface from 'axios';

// Token 接口,访问 token,刷新 token 和过期时
const instance = axios.create({
 // baseURL: ''
 timeout: 300000,
 headers: {
  'Content-Type': 'application/json',
  'X-Requested-With': 'XMLHttpRequest',
 },
});

async function refreshAccessToken(): Promise<AxiosInterface.AxiosResponse<AxiosData>> {
 return await instance.post('api/refreshtoken');
}

let isRefreshing = false;
let requests: Array<Function> = []; // 若在 token 刷新过程中进来多个请求则存入 requests 中
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
// 设置请求拦截器,若 token 过期则刷新 token
axios.interceptors.request.use(config => {
 const tokenObj = JSON.parse(window.localStorage.getItem('token') as string);
 if (config.url === 'api/login' || config.url === 'api/refreshtoken') return config;
 let accessToken = tokenObj.accessToken;
 let expireTime = tokenObj.expireTime;
 const refreshToken = tokenObj.refreshToken;

 config.headers.Authorization = accessToken;

 let time = Date.now();
 console.log(time, expireTime);
 if (time > expireTime) {
  if (!isRefreshing) {
   isRefreshing = true;
   refreshAccessToken()
    .then(res => {
     ({ accessToken, expireTime } = res.data.data);
     time = Date.now();
     const tokenStorage = {
      accessToken,
      refreshToken,
      expireTime: Number(time) + Number(expireTime),
     };
     window.localStorage.setItem('token', JSON.stringify(tokenStorage));
     isRefreshing = false;
     return accessToken;
    })
    .then((accessToken: string) => {
     requests.forEach(cb => {
      cb(accessToken);
     });
     requests = [];
    })
    .catch((err: string) => {
     throw new Error(`refresh token error: {err}`);
    });
  }

  // 如果是在刷新 token 时进行的请求则暂存在 requests 数组中,这里需要使用一个 pendding 的 Promise 来确保拦截的成功
  const parallelRequest: Promise<AxiosInterface.AxiosRequestConfig> = new Promise(resolve => {
   requests.push((accessToken: string) => {
    config.headers.Authorization = accessToken;
    console.log(accessToken + Math.random() * 1000);
    resolve(config);
   });
  });

  return parallelRequest;
 }

 return config;
});

export default (vue: Function) => {
 vue.prototype.http = axios;
};

总结

以上就是我对刷新 token 的实现,如果有什么错误之处欢迎指正交流。

以上就是token 机制和实现方式的详细内容,更多关于token 机制和实现方式的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
jQuery侧边栏实现代码
May 06 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 #Vue.js
一分钟学会JavaScript中的try-catch
Dec 14 #Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 #Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 #Vue.js
element-ui点击查看大图的方法示例
Dec 14 #Javascript
小程序中手机号识别的示例
Dec 14 #Javascript
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
You might like
php中函数的形参与实参的问题说明
2010/09/01 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
javascript的函数作用域
2014/11/12 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
估算杭州有多少软件工程师
2015/08/11 面试题
linux面试题参考答案(11)
2016/11/26 面试题
大学运动会通讯稿
2014/01/28 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
机电一体化求职信
2014/03/10 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
小学班主任培训方案
2014/06/04 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
党员个人总结自评
2015/02/14 职场文书
自主招生专家推荐信
2015/03/26 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript