详解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认证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue项目中js-cookie的使用存储token操作

    1.安装js-cookie # npm install js-cookie --save # yarn add js-cookie 2.引用(需要的文件) import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(tcuncuoken) { return Coo

  • 详解JSON Web Token 入门教程

    JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理和用法. 一.跨域认证的问题 互联网服务离不开用户认证.一般流程是下面这样. 1.用户向服务器发送用户名和密码. 2.服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色.登录时间等等. 3.服务器向用户返回一个 session_id,写入用户的 Cookie. 4.用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器. 5.服务器收到 session

  • JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法

    本文实例讲述了JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法.分享给大家供大家参考,具体如下: Uncaught SyntaxError: Unexpected token ) 以下代码引发了此异常: <div class="Hd_live_Sharediv left"> <a href="javascript:void()" onclick="loadLivePlayer('ud

  • JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法

    本文实例讲述了JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法.分享给大家供大家参考,具体如下: Uncaught SyntaxError: Unexpected token ILLEGAL 未捕获的语法错误: 意想不到的非法令牌 如下图所示: 复制代码 代码如下: <input id="btn_0_4EAE4F474C91156086C0D4EA7E983C69C215B649" type="butt

  • php实现JWT(json web token)鉴权实例详解

    JWT是什么 JWT是json web token缩写.它将用户信息加密到token里,服务器不保存任何用户信息.服务器通过使用保存的密钥验证token的正确性,只要正确即通过验证.基于token的身份验证可以替代传统的cookie+session身份验证方法. JWT由三个部分组成:header.payload.signature 以下示例以JWT官网为例 header部分: { "alg": "HS256", "typ": "JWT

  • 详解Node.js access_token的获取、存储及更新

    一.写在前面的话 上一篇文章中,我们使用 Node.js 成功的实现了接入微信公众平台功能.在这篇文章中,我们将实现微信公众平台一个非常重要的参数 access_token ,它是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用 access_token. 在开始之前,让我们先按捺住自己激动的心情.调整好呼吸,因为我们要将上一篇文章的代码重新整理一下.一个好的项目结构,更能有助于我们理清业务逻辑以及将来维护代码的便捷.OK? 二.整理项目结构 1.打开我们的项目,并在项目中添加文件夹,命

  • node.js+captchapng+jsonwebtoken实现登录验证示例

    提到登录验证,大家肯定能想到的就是12306的验证码了吧.12306为了防止刷票,可以说是煞费苦心,验证码也越来越难识别,最终即使是人也可能识别不了了. 今天,小编就给大家说一下node如何实现图片验证码,以及使用token验证登录.学习本文你将学到: 1.使用captchapng生成图片验证码 2.使用jsonwebtoken实现登录验证 一.图片验证码生成(最后有全部代码) 首先,我们理一下流程,第一步服务器要随机生成一组四位数. 第二步,将这四位数用canvas绘图生成图片. 第三步,我们

  • Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例

    access_token 微信文档里存在两种access_token:普通 access_token 和 网页授权 access_token.具体区别参考:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 以下提到的 access_token 均为普通的 access_token 1. 首先我们先去看看是如何请求 access_token 的? 微信公众平台技术文档 GET请求:https://api.weixin

  • token 机制和实现方式

    前言 之前在面试的时候被问到过刷新 token 的问题,其实我对 token 验证机制的细节一直不清楚.新项目和后端的同学商量后使用刷新 token 来实现.本文主要分享一下对 token 机制的理解和实现方式. 登录验证的方式 登录验证一般来说有两个目的,一个是为了安全,一个是为了用户方便.因为 HTTP 是无状态的,所以后端在接受到请求之后并不能知道请求是从哪里来的,但是很多时候我们有验证用户身份的需求,同时前端又有保存用户登录状态的需求.而如果将用户信息保存在前端,必然是非常危险的,很容易

  • NodeJs crypto加密制作token的实现代码

    Node.js 内置的 Crypto 库 ,它提供各种加密算法,可以非常方便地让我们使用密码技术,解决应用开发中的问题.主要支持 hash(哈希),hmac(密钥哈希),cipher(编码),decipher(解码),sign(签名)以及 verify(验证)等.crypto 英文原意就是秘密成员的意思. 使用方法大概如下: crypto.createHash(algorithm) 指定使用的加密方式 var crypto = require("crypto");//加密 crypto

  • JSON Web Tokens的实现原理

    前言 最近在做一个Python项目的改造,将python项目重构为Java项目,过程中遇到了这个知识点,觉得这个蛮实用的,所以下班后回来趁热打铁写下这篇总结,希望后面的人能够有所借鉴,少走弯路. 一.优势简介 JSON Web Tokens简称jwt,是rest接口的一种安全策略.本身有很多的优势: 解决跨域问题:这种基于Token的访问策略可以克服cookies的跨域问题. 服务端无状态可以横向扩展,Token可完成认证,无需存储Session. 系统解耦,Token携带所有的用户信息,无需绑

  • node.js 微信开发之定时获取access_token

    什么是access_token access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存.access_token的存储至少要保留512个字符空间.access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效 当你的多个微信开发相关服务并存时,多个服务各自去获取 access_token ,最后导致其中一些服务会不能正常访问. 所以这种情况下,应该设置一个获取 access_to

随机推荐