Node.js Koa2使用JWT进行鉴权的方法示例


Posted in Javascript onAugust 17, 2018

前言

在前后端分离的开发中,通过 Restful API 进行数据交互时,如果没有对 API 进行保护,那么别人就可以很容易地获取并调用这些 API 进行操作。那么服务器端要如何进行鉴权呢?

Json Web Token 简称为 JWT,它定义了一种用于简洁、自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法。JWT 可以使用 HMAC 算法或者是 RSA 的公钥密钥对进行签名。

说得好像跟真的一样,那么到底要怎么进行认证呢?

Node.js Koa2使用JWT进行鉴权的方法示例

首先用户登录时,输入用户名和密码后请求服务器登录接口,服务器验证用户名密码正确后,生成token并返回给前端,前端存储token,并在后面的请求中把token带在请求头中传给服务器,服务器验证token有效,返回正确数据。

既然服务器端使用 Koa2 框架进行开发,除了要使用到 jsonwebtoken 库之外,还要使用一个 koa-jwt 中间件,该中间件针对 Koa 对 jsonwebtoken 进行了封装,使用起来更加方便。下面就来看看是如何使用的。

生成token

这里注册了个 /login 的路由,用于用户登录时获取token。

const router = require('koa-router')();
const jwt = require('jsonwebtoken');
const userModel = require('../models/userModel.js');

router.post('/login', async (ctx) => {
  const data = ctx.request.body;
  if(!data.name || !data.password){
    return ctx.body = {
      code: '000002',
      data: null,
      msg: '参数不合法'
    }
  }
  const result = await userModel.findOne({
    name: data.name,
    password: data.password
  })
  if(result !== null){
    const token = jwt.sign({
      name: result.name,
      _id: result._id
    }, 'my_token', { expiresIn: '2h' });
    return ctx.body = {
      code: '000001',
      data: token,
      msg: '登录成功'
    }
  }else{
    return ctx.body = {
      code: '000002',
      data: null,
      msg: '用户名或密码错误'
    }
  }
});

module.exports = router;

在验证了用户名密码正确之后,调用 jsonwebtoken 的 sign() 方法来生成token,接收三个参数,第一个是载荷,用于编码后存储在 token 中的数据,也是验证 token 后可以拿到的数据;第二个是密钥,自己定义的,验证的时候也是要相同的密钥才能解码;第三个是options,可以设置 token 的过期时间。

获取token

接下来就是前端获取 token,这里是在 vue.js 中使用 axios 进行请求,请求成功之后拿到 token 保存到 localStorage 中。这里登录成功后,还把当前时间存了起来,除了判断 token 是否存在之外,还可以再简单的判断一下当前 token 是否过期,如果过期,则跳登录页面

submit(){
  axios.post('/login', {
    name: this.username,
    password: this.password
  }).then(res => {
    if(res.code === '000001'){
      localStorage.setItem('token', res.data);
      localStorage.setItem('token_exp', new Date().getTime());
      this.$router.push('/');
    }else{
      alert(res.msg);
    }
  })
}

然后请求服务器端API的时候,把 token 带在请求头中传给服务器进行验证。每次请求都要获取 localStorage 中的 token,这样很麻烦,这里使用了 axios 的请求拦截器,对每次请求都进行了取 token 放到 headers 中的操作。

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  config.headers.common['Authorization'] = 'Bearer ' + token;
  return config;
})

验证token

通过 koa-jwt 中间件来进行验证,用法也非常简单

const koa = require('koa');
const koajwt = require('koa-jwt');
const app = new koa();

// 错误处理
app.use((ctx, next) => {
  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;
    }
  })
})

app.use(koajwt({
  secret: 'my_token'
}).unless({
  path: [/\/user\/login/]
}));

通过 app.use 来调用该中间件,并传入密钥 {secret: 'my_token'} ,unless 可以指定哪些 URL 不需要进行 token 验证。token 验证失败的时候会抛出401错误,因此需要添加错误处理,而且要放在 app.use(koajwt()) 之前,否则不执行。

如果请求时没有token或者token过期,则会返回401。

解析koa-jwt

我们上面使用 jsonwebtoken 的 sign() 方法来生成 token 的,那么 koa-jwt 做了些什么帮我们来验证 token。

resolvers/auth-header.js
module.exports = function resolveAuthorizationHeader(ctx, opts) {
  if (!ctx.header || !ctx.header.authorization) {
    return;
  }
  const parts = ctx.header.authorization.split(' ');
  if (parts.length === 2) {
    const scheme = parts[0];
    const credentials = parts[1];
    if (/^Bearer$/i.test(scheme)) {
      return credentials;
    }
  }
  if (!opts.passthrough) {
    ctx.throw(401, 'Bad Authorization header format. Format is "Authorization: Bearer <token>"');
  }
};

在 auth-header.js 中,判断请求头中是否带了 authorization,如果有,将 token 从 authorization 中分离出来。如果没有 authorization,则代表了客户端没有传 token 到服务器,这时候就抛出 401 错误状态。

verify.js

const jwt = require('jsonwebtoken');

module.exports = (...args) => {
  return new Promise((resolve, reject) => {
    jwt.verify(...args, (error, decoded) => {
      error ? reject(error) : resolve(decoded);
    });
  });
};

在 verify.js 中,使用 jsonwebtoken 提供的 verify() 方法进行验证返回结果。jsonwebtoken 的 sign() 方法来生成 token 的,而 verify() 方法则是用来认证和解析 token。如果 token 无效,则会在此方法被验证出来。

index.js

const decodedToken = await verify(token, secret, opts);
if (isRevoked) {
  const tokenRevoked = await isRevoked(ctx, decodedToken, token);
  if (tokenRevoked) {
    throw new Error('Token revoked');
  }
}
ctx.state[key] = decodedToken; // 这里的key = 'user'
if (tokenKey) {
  ctx.state[tokenKey] = token;
}

在 index.js 中,调用 verify.js 的方法进行验证并解析 token,拿到上面进行 sign() 的数据 {name: result.name, _id: result._id} ,并赋值给 ctx.state.user ,在控制器中便可以直接通过 ctx.state.user 拿到 name 和 _id 。

安全性

  • 如果 JWT 的加密密钥泄露的话,那么就可以通过密钥生成 token,随意的请求 API 了。因此密钥绝对不能存在前端代码中,不然很容易就能被找到。
  • 在 HTTP 请求中,token 放在 header 中,中间者很容易可以通过抓包工具抓取到 header 里的数据。而 HTTPS 即使能被抓包,但是它是加密传输的,所以也拿不到 token,就会相对安全了。

总结

这上面就是 jwt 基本的流程,这或许不是最完美的,但在大多数登录中使用已经足够了。

上面的代码可能不够具体,这里使用 Koa + mongoose + vue.js 实现的一个例子 :jwt-demo ,可以做为参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
jquery实现保存已选用户
Jul 21 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现轮播图及其原理详解
Apr 12 #jQuery
chosen实现省市区三级联动
Aug 16 #Javascript
webuploader实现上传图片到服务器功能
Aug 16 #Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 #Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 #Javascript
深入理解Vue 组件之间传值
Aug 16 #Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JS简单计算器实例
2015/01/20 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
详解Vue之计算属性
2020/06/20 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python实战教程之自动扫雷
2018/07/13 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
医学专业毕业生个人的求职信
2013/12/04 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
大学军训感言1500字
2014/03/09 职场文书
初三班主任寄语大全
2014/04/04 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
超市创业计划书
2014/09/15 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
未中标通知书
2015/04/17 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
总结python多进程multiprocessing的相关知识
2021/06/29 Python