koa+jwt实现token验证与刷新功能


Posted in Javascript onMay 30, 2019

JWT

JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的、自包含的方式,用于作为JSON对象在各方之间安全地传输信息。该信息可以被验证和信任,因为它是数字签名的。

本文只讲Koa2 + jwt的使用,不了解JWT的话请到这里)进行了解。

koa环境

要使用koa2+jwt需要先有个koa的空环境,搭环境比较麻烦,我直接使用koa起手式,这是我使用koa+typescript搭建的空环境,如果你也经常用koa写写小demo,可以点个star,方便~

安装koa-jwt

koa-jwt主要作用是控制哪些路由需要jwt验证,哪些接口不需要验证:

import * as koaJwt from 'koa-jwt';
//路由权限控制 除了path里的路径不需要验证token 其他都要
app.use(
  koaJwt({
    secret: secret.sign
  }).unless({
    path: [/^\/login/, /^\/register/]
  })
);

上面代码中,除了登录、注册接口不需要jwt验证,其他请求都需要。

使用jsonwebtoken生成、验证token

执行npm install jsonwebtoken安装jsonwebtoken

相关代码:

import * as jwt from 'jsonwebtoken';
const secret = 'my_app_secret';
const payload = {user_name:'Jack', id:3, email: '1234@gmail.com'};
const token = jwt.sign(payload, secret, { expiresIn: '1h' });

上面代码中通过jwt.sign来生成一个token,

参数意义:

  • payload:载体,一般把用户信息作为载体来生成token
  • secret:秘钥,可以是字符串也可以是文件
  • expiresIn:过期时间 1h表示一小时

在登录中返回token

import * as crypto from 'crypto';
import * as jwt from 'jsonwebtoken';
async login(ctx){
 //从数据库中查找对应用户
 const user = await userRespository.findOne({
  where: {
   name: user.name
  }
 });
 //密码加密
 const psdMd5 = crypto
  .createHash('md5')
  .update(user.password)
  .digest('hex');
 //比较密码的md5值是否一致 若一致则生成token并返回给前端
 if (user.password === psdMd5) {
  //生成token
  token = jwt.sign(user, secret, { expiresIn: '1h' });
  //响应到前端
  ctx.body = {
   token
  }
 }
}

前端拦截器

前端通过登录拿到返回过来的token,可以将它存在localStorage里,然后再以后的请求中把token放在请求头的Authorization里带给服务端。

这里以axios请求为例,在发送请求时,通过请求拦截器把token塞到header里:

//请求拦截器
axios.interceptors.request.use(function(config) {
  //从localStorage里取出token
  const token = localStorage.getItem('tokenName');
  //把token塞入Authorization里
  config.headers.Authorization = `Bearer ${token}`;
  
  return config;
 },
 function(error) {
  // Do something with request error
  return Promise.reject(error);
 }
);

服务端处理前端发送过来的Token
前端发送请求携带token,后端需要判断以下几点:

token是否正确,不正确则返回错误
token是否过期,过期则刷新token 或返回401表示需要从新登录

关于上面两点,需要在后端写一个中间件来完成:

app.use((ctx, next) => {
 if (ctx.header && ctx.header.authorization) {
  const parts = ctx.header.authorization.split(' ');
  if (parts.length === 2) {
   //取出token
   const scheme = parts[0];
   const token = parts[1];
   if (/^Bearer$/i.test(scheme)) {
    try {
     //jwt.verify方法验证token是否有效
     jwt.verify(token, secret.sign, {
      complete: true
     });
    } catch (error) {
     //token过期 生成新的token
     const newToken = getToken(user);
     //将新token放入Authorization中返回给前端
     ctx.res.setHeader('Authorization', newToken);
    }
   }
  }
 }
 return next().catch(err => {
  if (err.status === 401) {
   ctx.status = 401;
   ctx.body =
    'Protected resource, use Authorization header to get access\n';
  } else {
   throw err;
  }});
 });

上面中间件是需要验证token时都需要走这里,可以理解为拦截器,在这个拦截器中处理判断token是否正确及是否过期,并作出相应处理。

后端刷新token 前端需要更新token
后端更换新token后,前端也需要获取新token 这样请求才不会报错。

由于后端更新的token是在响应头里,所以前端需要在响应拦截器中获取新token。

依然以axios为例:

//响应拦截器
axios.interceptors.response.use(function(response) {
  //获取更新的token
  const { authorization } = response.headers;
  //如果token存在则存在localStorage
  authorization && localStorage.setItem('tokenName', authorization);
  return response;
 },
 function(error) {
  if (error.response) {
   const { status } = error.response;
   //如果401或405则到登录页
   if (status == 401 || status == 405) {
    history.push('/login');
   }
  }
  return Promise.reject(error);
 }
);

总结

以上所述是小编给大家介绍的koa+jwt实现token验证与刷新功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
深入理解Node module模块
Mar 26 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
浅谈js中的bind
Mar 18 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
深入理解JavaScript 箭头函数
May 30 #Javascript
socket在egg中的使用实例代码详解
May 30 #Javascript
深入了解JavaScript 私有化
May 30 #Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
Vue CL3 配置路径别名详解
May 30 #Javascript
Vue CLI3中使用compass normalize的方法
May 30 #Javascript
通过实践编写优雅的JavaScript代码
May 30 #Javascript
You might like
php+javascript的日历控件
2009/11/19 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
React实现todolist功能
2020/12/28 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python中文编码问题小结
2014/09/28 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
python实现视频压缩功能
2020/12/18 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
销售主管的自我评价分享
2014/01/03 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
组织鉴定材料
2014/06/02 职场文书
新兵入伍心得体会
2014/09/04 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
Nginx源码编译安装过程记录
2021/11/17 Servers
Oracle使用别名的好处
2022/04/19 Oracle