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

 更新时间:2020年05月25日 10:18:21   作者:秦老爷子  
这篇文章主要介绍了详解Node.js使用token进行认证的简单示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

首先创建工程目录:


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请求。

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


证明token是有效的。

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


证明拦截成功。

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

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

相关文章

  • Nestjs自定义注解实现接口权限控制详解

    Nestjs自定义注解实现接口权限控制详解

    这篇文章主要为大家介绍了Nestjs自定义注解实现接口权限控制详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 使用C++为node.js写扩展模块

    使用C++为node.js写扩展模块

    本文给大家介绍的是在window7下使用C++来给node.js编写扩展模块的方法,附上一个简单的hello实例,有需要的小伙伴可以参考下。
    2015-04-04
  • node.js调用C++开发的模块实例

    node.js调用C++开发的模块实例

    这篇文章主要介绍了node.js调用C++开发的模块实例,在node的程序中,如果有大数据量的计算,处理起来比较慢,可以用C++来处理,然后通过回调(callback的形式),返回给node,需要的朋友可以参考下
    2015-07-07
  • 新入门node.js必须要知道的概念(必看篇)

    新入门node.js必须要知道的概念(必看篇)

    下面小编就为大家带来一篇新入门node.js必须要知道的概念(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • npm does not support Node.js问题的解决办法

    npm does not support Node.js问题的解决办法

    这篇文章主要给大家介绍了关于npm does not support Node.js问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • 详解nodejs express下使用redis管理session

    详解nodejs express下使用redis管理session

    本篇文章主要介绍了详解nodejs express下使用redis管理session ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • Nodejs的express使用教程

    Nodejs的express使用教程

    Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用,本篇文章给大家介绍nodejs的express使用教程,感兴趣的朋友参考下
    2015-11-11
  • Node如何实现在浏览器预览项目的所有图片详解

    Node如何实现在浏览器预览项目的所有图片详解

    最近项目遇到了个需求,需要将存放图片进行预览,所以这篇文章主要给大家介绍了关于Node如何实现在浏览器预览项目的所有图片的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • Node.js如何实现注册邮箱激活功能 (常见)

    Node.js如何实现注册邮箱激活功能 (常见)

    今天了解了node如何实现邮箱激活功能,这个功能非常常见,当我们注册一个账号时,肯定会有这步,下面看下如何实现这个功能
    2017-07-07
  • node.js中的url.format方法使用说明

    node.js中的url.format方法使用说明

    这篇文章主要介绍了node.js中的url.format方法使用说明,本文介绍了url.format的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12

最新评论