Node.js+Koa实现JWT用户认证步骤详解

这次给大家带来Node.js+Koa实现JWT用户认证步骤详解,Node.js+Koa实现JWT用户认证的注意事项有哪些,下面就是实战案例,一起来看一下。

Node.js+Koa实现JWT用户认证步骤详解

一、前置知识

基于Token的身份验证

Koajs 中文文档

Koa 框架教程

二、环境

Microsoft Visual Studio 2017集成开发环境

Node.js v8.9.4Javascript运行环境

三、开始动手,一步步来完善

1、创建基础的静态资源服务器、基础架构

以下是基本的代码,实现静态服务器,以及一个当token验证异常时候的处理。

下面我们将在这个基本代码下逐步增加注册、登录、信息的功能。

const path = require('path');  // 用于处理目录路径const Koa = require('koa');  // web开发框架const serve = require('koa-static'); // 静态资源处理const route = require('koa-route'); // 路由中间件const jwt = require('jsonwebtoken'); // 用于签发、解析`token`const jwtKoa = require('koa-jwt'); // 用于路由权限控制const koaBody = require('koa-body'); // 用于查询字符串解析到`ctx.request.query`const app = new Koa();const website = { scheme: 'http', host: 'localhost', port: 1337, join: function () { return `${this.scheme}://${this.host}:${this.port}` }}/* jwt密钥 */const secret = 'secret';/* 当token验证异常时候的处理,如token过期、token错误 */app.use((ctx, next) => { return next().catch((err) => { if (err.status === 401) {  ctx.status = 401;  ctx.body = {  ok: false,  msg: err.originalError ? err.originalError.message : err.message  } } else {  throw err; } });});/* 查询字符串解析到`ctx.request.query` */app.use(koaBody());/* 路由权限控制 */// 待办事项……/* POST /api/register 注册 */// 待办事项……/* GET /api/login 登录 */// 待办事项……/* GET /api/info 信息 */// 待办事项……/* 静态资源处理 */app.use(serve(path.join(dirname, 'static')));/* 监听服务器端口 */app.listen(website.port, () => { console.log(`${website.join()} 服务器已经启动!`);});

登录后复制

下面,我们将在注册、登录、信息的注释底下添加实现的代码。

2、路由权限控制

注册、登录接口、其它资源不需要认证,信息接口需要认证。

/* 路由权限控制 */app.use(jwtKoa({ secret: secret }).unless({ // 设置login、register接口,可以不需要认证访问 path: [ /^/api/login/, /^/api/register/, /^((?!/api).)*$/ // 设置除了私有接口外的其它资源,可以不需要认证访问 ]}));

登录后复制

3、注册

/* POST /api/register 注册 */app.use(route.post('/api/register', async (ctx, next) => { const body = ctx.request.body; /* * body = { * user : '御焱', * password : '123456' * } */ // 判断 body.user 和 body.password 格式是否正确 // 待办事项…… // 判断用户是否已经注册 // 待办事项…… // 保存到新用户到数据库中 // 待办事项…… // 是否注册成功 let 是否注册成功 = true; if (是否注册成功) { // 返回一个注册成功的JOSN数据给前端 return ctx.body = {  ok: true,  msg: '注册成功',  token: getToken({ user: body.user, password: body.password }) } } else { // 返回一个注册失败的JOSN数据给前端 return ctx.body = {  ok: false,  msg: '注册失败' } }}));/* 获取一个期限为4小时的token */function getToken(payload = {}) { return jwt.sign(payload, secret, { expiresIn: '4h' });}

登录后复制

Node.js+Koa实现JWT用户认证步骤详解

3、登录

/* GET /api/login 登录 */app.use(route.get('/api/login', async (ctx, next) => { const query = ctx.request.query; /* * query = { * user : '御焱', * password : '123456' * } */ // 判断 query.user 和 query.password 格式是否正确 // 待办事项…… // 判断是否已经注册 // 待办事项……  // 判断姓名、学号是否正确 // 待办事项……  return ctx.body = { ok: true, msg: '登录成功', token: getToken({ user: query.user, password: query.password }) }}));

登录后复制

Node.js+Koa实现JWT用户认证步骤详解

前端获取到token之后,可以保存在任意本地存储里。

4、信息

/* GET /api/info 信息 */app.use(route.get('/api/info', async (ctx, next) => { // 前端访问时会附带token在请求头 payload = getJWTPayload(ctx.headers.authorization) /* * payload = { * user : "御焱", * iat : 1524042454, * exp : 1524056854 * } */ // 根据 payload.user 查询该用户在数据库中的信息 // 待办事项…… const info = { name: '御焱', age: 10, sex: '男' } let 获取信息成功 = true; if (获取信息成功) { return ctx.body = {  ok: true,  msg: '获取信息成功',  data: info } } else { return ctx.body = {  ok: false,  msg: '获取信息失败' } }}));/* 通过token获取JWT的payload部分 */function getJWTPayload(token) { // 验证并解析JWT return jwt.verify(token.split(' ')[1], secret);}

登录后复制

Node.js+Koa实现JWT用户认证步骤详解

访问需要认证的接口时,需要在request头附带Authorization:Bearer [token]字段。

来源地址:https://segmentfault.com/a/1190000014727547

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Vue三层嵌套路由使用心得

Vue.js计算与侦听器属性使用详解

以上就是Node.js+Koa实现JWT用户认证步骤详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2762125.html

(0)
上一篇 2025年3月8日 09:51:50
下一篇 2025年3月8日 09:52:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 动态加载JS文件三种方式总结

    这次给大家带来动态加载JS文件三种方式总结,使用动态加载JS文件三种方式的注意事项有哪些,下面就是实战案例,一起来看一下。 一、使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档…

    编程技术 2025年3月8日
    000
  • Vue.js实战案例详解

    这次给大家带来Vue.js实战案例详解,Vue.js实战案例使用的注意事项有哪些,下面就是实战案例,一起来看一下。 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为V…

    编程技术 2025年3月8日
    200
  • jQuery.i18n.properties如何实现js国际化标准

    这次给大家带来jQuery.i18n.properties如何实现js国际化标准,jQuery.i18n.properties实现js国际化标准的注意事项有哪些,下面就是实战案例,一起来看一下。 当我们在做前台页面开发时,由于页面内容过多,…

    2025年3月8日 编程技术
    200
  • JS百度搜索框效果功能实现案例详解

    这次给大家带来JS百度搜索框效果功能实现案例详解,JS百度搜索框效果功能实现的注意事项有哪些,下面就是实战案例,一起来看一下。 效果:   1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间。   2.点击页面头部的换肤,自动…

    2025年3月8日
    200
  • JS做出哈希表功能

    这次给大家带来JS做出哈希表功能,JS做出哈希表功能的注意事项有哪些,下面就是实战案例,一起来看一下。 在算法中,尤其是有关数组的算法中,哈希表的使用可以很好的解决问题,所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子。 说…

    2025年3月8日
    200
  • vue地区选择组件使用步骤详解

    这次给大家带来vue地区选择组件使用步骤详解,vue地区选择组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 概述 主要用于全国地区数据的操作,包括省,市,区三级联动,地区数据的添加和删除; 在操作地区数据时,以前也用过树形的地区…

    编程技术 2025年3月8日
    200
  • vue mint-ui tabbar组件使用步骤详解

    这次给大家带来vue mint-ui tabbar组件使用步骤详解,vue mint-ui tabbar组件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 新建tabbar.vue 主页 积分商城 微社区 我的 export def…

    编程技术 2025年3月8日
    200
  • 原生JS+AJAX做出三级联动效果(附代码)

    这次给大家带来原生JS+AJAX做出三级联动效果(附代码),原生JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下。 js 三级联动的实现代码如下所示: js原生ajax -请选择 省/直辖市/自治区- -请选择 市…

    编程技术 2025年3月8日
    200
  • Vue内引入tinymce富文本编辑器步骤详解

    这次给大家带来Vue内引入tinymce富文本编辑器步骤详解,Vue内引入tinymce富文本编辑器的注意事项有哪些,下面就是实战案例,一起来看一下。 项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量、简洁编辑器 但是公…

    2025年3月8日 编程技术
    200
  • Vue.js双向绑定实现步骤说明

    这次给大家带来Vue.js双向绑定实现步骤说明,Vue.js双向绑定实现的注意事项有哪些,下面就是实战案例,一起来看一下。 这篇体验一下VUE的双向绑定 当前时刻{{ CurrentTime }} var app = new Vue({ e…

    2025年3月8日
    200

发表回复

登录后才能评论