详解Node.js使用token进行认证的简单示例


Posted in Javascript onMay 25, 2020

本文只介绍简单的应用,关于json web token的具体介绍以及原理请参考阮一峰老师的JSON Web Token 入门教程。

使用的Node框架是koa2,前端发送ajax请求使用axios

首先创建工程目录:

详解Node.js使用token进行认证的简单示例

static中存放静态资源,views存放前端模板,server.js为后端代码。

安装必要的依赖项:

"dependencies": {
  "@koa/router": "^8.0.8",
  "jsonwebtoken": "^8.5.1",
  "koa": "^2.12.0",
  "koa-bodyparser": "^4.3.0",
  "koa-ejs": "^4.3.0",
  "koa-jwt": "^4.0.0",
  "koa-static": "^5.0.0",
  "koa-views": "^6.2.2"
 }

在server.js中添加代码来创建一个简单的后端程序,由于网上有太多相关示例代码,在此不再赘述。

const koa = require('koa');
const app = new koa();
const bodyParser = require('koa-bodyparser');
const router = require('@koa/router')();
const views = require('koa-views');
const static = require('koa-static');
const path = require('path');

app.use(bodyParser());
app.use(views(__dirname + '/views', {
 map: { html: 'ejs' }
}));

app.use(static(path.join(__dirname, '/static')));

router.get('/', ctx => ctx.render('index'));

app
 .use(router.routes())
 .use(router.allowedMethods());

app.listen(8080, () => {
 console.log('server is running at port 8080');
});

const path = require('path');后添加代码:

const { sign } = require('jsonwebtoken');
const secret = 'demo';
const jwt = require('koa-jwt')({ secret });

sign方法用来生成toekn,secret为自定义的秘钥,jwt提供路有权限控制的功能,它会对需要限制的资源请求进行检查。

创建路由login:

router.post('/login', ctx => {
 const { user } = ctx.request.body;
 if (user && user.username === 'vip') {
  let { username } = user;
  const token = sign({ username }, secret, { expiresIn: '1h' });
  ctx.body = {
   message: 'GET TOKEN SUCCESS',
   status: 200,
   token
  }
 } else {
  ctx.body = {
   message: 'GET TOKEN FAILED',
   status: 500
  }
 }
});

如代码所示,当前端发送的请求体中包含一个user对象并且username为vip时将生成一个token返回给前端,这里用到了前文提到的sign方法,第一个参数是用户信息,第二个参数是自定义的key,第三个参数是个option,此处只定义了过期时间。

再创建路由info:

router.get('/info', jwt, ctx => {
 ctx.body = { message: `Welcome ${ctx.state.user.username}!`};
});

与平时看到的路由代码稍有不同,这里增加了一个jwt中间件,用来对权限进行控制,如果无法通过验证,则不会执行之后的代码。在前文生成token后,会把用户名存入ctx.state.user中,在这里可以直接获取。

这时在控制台中输入node server启动该项目

打开index.html文件,添加一个简单的表单和一个按钮,并引入axios:

<form>
 <input type="text" name="username">
 <button id="submit">提交</button>
</form>
<button id="get">获取</button>
<script src="/vendors/axios.min.js"></script>

首先添加登录的逻辑:

document.querySelector('#submit').addEventListener('click', e => {
  e.preventDefault();
  const username = document.querySelector('input[name="username"]').value;
  axios.post('/login', { user: { username } })
   .then(response => {
    response = response.data;
    const { status, token, message } = response;
    if (status === 200) {
     localStorage.setItem('token', token);
    }
    alert(message);
   })
   .catch(error => alert(error.toString()));
 });

这里将服务端生成的token存入localStorage以便下次使用。

当在输入框中输入vip并点击提交按钮,后端返回如下格式的信息:

message: "GET TOKEN SUCCESS"
status: 200
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InZpcCIsImlhdCI6MTU5MDMyOTkxOSwiZXhwIjoxNTkwMzMzNTE5fQ.PsyLYmr-pDxxdtrBEvMccVtBr9-xtOAHdZKen4FP34c"

然后再添加获取逻辑:

document.querySelector('#get').addEventListener('click', e => {
  e.preventDefault();
  const instance = axios.create({ headers: { authorization: `Bearer ${localStorage.getItem('token')}` } });
  instance.get('/info')
   .then(response => {
    response = response.data;
    console.log(response)
    alert(response.message);
   })
   .catch(error => alert(error.toString()));
 });

此处用到了axios.create方法,该方法可以在请求头中添加token信息。用localStorage中获取token并拼成形如authorization: Bearer token的形式,然后再用示例发送get请求。

此时再点击获取按钮,会提示:

详解Node.js使用token进行认证的简单示例

证明token是有效的。

此时去Application中把localStorage记录清除掉,再点击获取按钮,提示:

详解Node.js使用token进行认证的简单示例

证明拦截成功。

完整示例可以去我的GitHub查看并下载。

到此这篇关于详解Node.js使用token进行认证的简单示例的文章就介绍到这了,更多相关Node.js使用token认证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
在vue中获取dom元素内容的方法
Jul 10 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
基于redis的小程序登录实现方法流程分析
May 25 #Javascript
JSONP解决JS跨域问题的实现
May 25 #Javascript
JS实现时间校验的代码
May 25 #Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 #Javascript
js 动态校验开始结束时间的实现代码
May 25 #Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 #Javascript
Node.js API详解之 repl模块用法实例分析
May 25 #Javascript
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php下将XML转换为数组
2010/01/01 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python可变参数函数用法实例
2015/07/07 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
python manage.py runserver流程解析
2019/11/08 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
经典团队口号大全
2014/06/21 职场文书
党建目标管理责任书
2014/07/25 职场文书
科技活动总结范文
2015/05/11 职场文书
民事诉讼代理词
2015/05/25 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS