用express实现token鉴权

最新推荐文章于 2023-11-15 15:17:51 发布
最新推荐文章于 2023-11-15 15:17:51 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： node 文章标签： node.js 后端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51354601/article/details/130197082
版权

前期工作
npm init
npm install experss cors jsonwebtoken express-jwt@7 mysql

在这里插入图片描述
npm下载依赖包完成后
创建app.js

const express = require("express");
const app = express();

// 跨域
const cors = require("cors");
app.use(cors());


// 处理post请求
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

const { expressjwt } = require("express-jwt");
app.use(
  expressjwt({
    secret: "liuhailang",
    // 解密算法
    algorithms: ["HS256"],
    // 除了带api的接口，其他接口都需要验证token
  }).unless({ path: [/^\/api\//] })
);

// 引用router
const router = require("./server/route/index");
app.use(router);

app.listen(3000, () => {
  console.log("Server is running at http://127.0.0.1:3000");
});

再node_modules创建通缉目录 server和web utils文件方便后续操作

创建db.js连接数据库

const mysql = require("mysql");
let connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "0519",
  database: "koa2", //数据库名称
});

// 测试连接
// connection.connect((err) => {
//   if (err) {
//     console.log("数据库连接失败");
//   } else {
//     console.log("数据库连接成功");
//     // 读取一条数据
//     connection.query("select * from users", (err, result) => {
//       if (err) {
//         console.log("读取数据失败");
//       } else {
//         console.log(result);
//       }
//     });
//   }
// });

module.exports = connection;

创建路由server/route/index.js

const express = require("express");
const router = express.Router();
// 连接数据库
const db = require("../utils/db");

// jwt 将用户信息加密成token
const jwt = require("jsonwebtoken");
// 密钥
const secretKey = "liuhailang";

// 登录路由
router.post("/api/login", (req, res) => {
  let userObj = req.body;
  const { username, password } = userObj;
  let account = username;
  let pwd = password;
  const tokenStr = jwt.sign(
    // 三个参数 1.加密的数据 2.密钥 3.过期时间
    { username: account },
    secretKey,
    { expiresIn: "1h" }
  );

  // 获取前端传来的数据，查询数据库是否存在该用户
  db.query(
    "select * from users where account=? and pwd=?",
    [account, pwd],
    (err, data) => {
      if (data.length === 0) {
        res.send({ code: 500, msg: "用户名或密码错误" });
      } else {
        // 判断token是否存在
        if (data[0].token) {
          res.send({
            code: 200,
            msg: "欢迎登录",
            token: data[0].token, //发送token给用户
          });
        } else {
          // 更新token
          db.query(
            "update users set token=? where account=?",
            [tokenStr, account],
            (err, data) => {
              if (err) {
                console.log(err);
                res.send({ code: 500, msg: "服务器错误" });
              } else {
                res.send({
                  code: 200,
                  msg: "欢迎登录",
                  token: tokenStr, //发送token给用户
                });
              }
            }
          );
        }
      }
    }
  );
});

// 注册
router.post("/api/register", (req, res) => {
  let userObj = req.body;
  const { username, password } = userObj;
  let account = username;
  let pwd = password;
  // 生成token
  const tokenStr = jwt.sign(
    // 三个参数 1.加密的数据 2.密钥 3.过期时间
    { username: account },
    secretKey,
    { expiresIn: "1h" }
  );

  let token = tokenStr;
  // 获取前端传来的数据，查询数据库是否存在该用户
  db.query(
    "insert into users(account,pwd,token) values(?,?,?)",
    [account, pwd, token],
    (err, data) => {
      if (err) {
        console.log(err);
        res.send({ code: 500, msg: "服务器错误" });
      } else {
        res.send({
          code: 200,
          msg: "注册成功",
          token: tokenStr, //发送token给用户
        });
      }
    }
  );
});

router.get("/getData", (req, res) => {
  // 获取前端传来的数据，查询数据库是否存在该用户
  db.query("select * from subject", (err, data) => {
    if (err) {
      console.log(err);
      res.send({ code: 500, msg: "服务器错误" });
    } else {
      res.send({
        code: 200,
        msg: "获取数据成功",
        data: data,
      });
    }
  });
});

module.exports = router;

接下来再web文件下创建login.html和reg.html两个文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <!-- 登录注册 -->
    <div id="login">
      <input type="text" id="username" placeholder="请输入用户名" />
      <input type="password" id="password" placeholder="请输入密码" />
      <button id="btn">登录</button>
      <button id="huoqu">获取数据</button>
      <div id="list"></div>
    </div>
    <script>
      // 登录注册逻辑
      // 1.获取元素
      let username = document.getElementById("username");
      let password = document.getElementById("password");
      let btn = document.getElementById("btn");
      // 2.绑定事件
      btn.onclick = function () {
        // 3.获取用户输入的值
        let usernameValue = username.value;
        let passwordValue = password.value;
        // 4.发送请求
        axios
          .post("http://localhost:3000/api/login", {
            username: usernameValue,
            password: passwordValue,
          })
          .then(function (res) {
            console.log(res);
            // 储存token
            localStorage.setItem("token", res.data.token);
          })
          .catch(function (err) {
            console.log(err);
          });
      };

      // 获取数据
      let huoqu = document.getElementById("huoqu");
      let list = document.getElementById("list");
      huoqu.onclick = function () {
        // 2.发送请求
        axios
          .get("http://localhost:3000/getData", {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("token"),
            },
          })
          .then(function (res) {
            // const { data } = res.data;
            // for (let i = 0; i < data.length; i++) {
            //   list.innerHTML += `
            //     <div>${data[i].title}</div>
            //   `;
            // }
            // 用forEach重写
            res.data.data.forEach((item) => {
              list.innerHTML += `
                <div>${item.title}</div>
              `;
            });

          
          })
          .catch(function (err) {
            console.log(err);
          });

      };

    </script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <!-- 注册 -->
    <div id="register">
      <input type="text" id="username" placeholder="请输入用户名" />
      <input type="password" id="password" placeholder="请输入密码" />
      <button id="btn">注册</button>
    </div>

    <script>
      // 注册逻辑
      // 1.获取元素
      let username = document.getElementById("username");
      let password = document.getElementById("password");
      let btn = document.getElementById("btn");
      // 2.绑定事件
      btn.onclick = function () {
        // 3.获取用户输入的值
        let usernameValue = username.value;
        let passwordValue = password.value;
        // 4.发送请求
        axios
          .post("http://localhost:3000/api/register", {
            username: usernameValue,
            password: passwordValue,
          })
          .then(function (res) {
            console.log(res);
          })
          .catch(function (err) {
            console.log(err);
          });
      };

 

    </script>
  </body>
</html>

根据图片创建数据表的users 和subject两个文件
在这里插入图片描述
在这里插入图片描述
现在就可以模拟前后端分离token 鉴权了
在这里插入图片描述

在这里插入图片描述
后端返回的token储存再local Storage中
每次获取数据的时候必须请求头携带token判断token是否有效登录
在这里插入图片描述

lionliu0519
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
鉴权大全（cookie、session、token、jwt、单点登录），深入理解和搞懂鉴权
qzwzsl的博客
07-18 1449
鉴权大全（cookie、session、token、jwt、单点登录），深入理解和搞懂鉴权
express登录返回token并进行token验证
qq_35385241的博客
04-21 1212
使用express做登录token验证如下： 1. 用户登录成功后，使用jsonwebtoken生成token并返回 Install npm install jsonwebtoken usage const jwt = require('jsonwebtoken'); jwt.sign({ exp: Math.floor(Date.now() / 1000) + (60 * 60), data: 'foobar' }, 'secret', (err, token) => { consol
node.js之express的token验证
10-24
基于 express 封装的用户鉴权功能，基本原理： 1、用 jsonwebtoken 生成 token 2、用 express-jwt 验证 token 是否过期或失效 3、用 jsonwebtoken 解析出 token 中的用户信息，比如用户 id
nodejs express中使用token验证机制
small_white_123的博客
11-21 2965
token身份认证基本概念了解Session认证的局限性什么是tokenjwt的原理jwt的组成JWT的三个部分各自代表的含义jwt的使用方式在express中使用jwt定义secret密钥在登录成功后生成 JWT 字符串解析 JWT字符串 还原为JSON对象使用req.user 获取用户信息错误中间件前端如何使用token 基本概念 了解Session认证的局限性 Session 认证机制需要配合Cookie才能实现。由于 Cookie 默认不支持跨域访问，所以，当涉及到前端跨域请求后端接口的时候，需要做
四、使用Express在服务端设置token验证
A_bad_boy_hahaha的博客
06-11 1571
Token令牌的流程 服务端在收到用户的登录请求的时候，验证用户名和密码 验证成功之后，服务端会生成一个Token令牌，并把这个Token发送给客户端 客户端收到Token之后，可以把它存储在LocalStorage中 客户端在每次使用axios发起请求的时候，可以使用请求拦截器把本地存储的Token放在请求头中发送给服务端 服务端收到请求之后，验证请求头中的Token如果验证成功就返回数据， 使用NodeJS生成token 生成Token需要安装两个依赖包 npm i jsonwebtoken
express 接口进行鉴权，自定义鉴权中间件，并可携带参数
好巧的博客
06-18 1831
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。解释：res.send() 或 res.json() 这类客户端返回的方法一个请求只能返回一次，如果多次返回就会出现这个错误。express.js中的中间件是一种处理应用程序中常见功能的强大，优雅的方法。例如接口在响应之前，对接口进行鉴权，调用 next() 函数通过鉴权。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
Express安全验证——密码加密与鉴权
weixin_45925906的博客
05-16 1932
目录bcrypt密码加密Cookie-Session鉴权Token鉴权 bcrypt密码加密 在实际应用中，直接将用户密码以明文信息进行存储是不安全的做法，这里讲解一下如何使用密码解析与解析 安装bcrypt模块 yarn add bcrypt 加密与解析函数 这里需要自己进行promise的封装，才能避免因为异步的原因导致出错 exports.hash = (myPlaintextPassword) => { return new Promise((resolve, reject)
Nodejs+Express+MySQL实现登陆功能（含验证码）
weixin_45979310的博客
07-02 1009
登陆时短时间内，输错一定次数，会出现验证码。
Express框架开发接口之JWT鉴权机制
m0_52704461的博客
11-01 277
身份认证（Authentication）又称“身份验证”、“鉴权”，是指通过一定的手段，完成对用户身份的确认。⚫ 日常生活中的身份认证随处可见，例如：高铁的验票乘车，手机的密码或指纹解锁，支付宝或微信的支付密码等。⚫ 在 Web 开发中，也涉及到用户身份的认证，例如：各大网站的手机验证码登录、邮箱密码登录、二维码登录等。2不同开发模式下的身份认证对于服务端渲染和前后端分离这两种开发模式来说，分别有着不同的身份认证方案：① 服务端渲染推荐使用 Session 认证机制。
Node.js-一个基于token的验证登录
08-09
一个基于vue node mongodb实现的Jsonwebtoken简单登录功能
基于express框架的Token实现方案
致我那些年搬过的砖
05-10 2332
https://www.cnblogs.com/hlere/p/6668159.html?utm_source=itdadao&amp;utm_medium=referral
Express：接口token和session配置
读心悦
10-22 456
base64是一种基于64个可打印字符来表示二进制数据的方法，但是base64并不是一个安全的加密方法，它仅仅是是起到编码的作用，不能用来加密。3、当客户端再次访问服务器的时候，需要携带之前的凭证【cookie】，然后服务器从session中查找该用户保存的状态，1、当用户从客户端访问服务端时候，服务器把用户状态以某种形式记录在服务器上，这个记录的内容就是session的内容；2、客户端从服务器获取一个凭证的时候，并且将该凭证存储在浏览器上，这是存储的内容就是cookie的内容；
express鉴权从入门到入境
星海拾遗
03-24 2082
express鉴权之路token图示一点通(图是我自己画的，虽丑勿怪)express鉴权下载加密/解密包加密基本使用（生成token）传递Token查看token验证token 讲在前面的话：一个成熟的全栈工程师开发的前后端项目鉴权是必不可少的，接下来我们就用一篇文章来介绍一下express鉴权之路。 本文主要目的是介绍鉴权，那么默认读者已经配置完成了express的跨域基本配置以及options请求处理以及post请求参数接收 token图示一点通(图是我自己画的，虽丑勿怪) 看这个示意图就知道校验过程
使用express-session对用户登录状态的鉴权
weixin_53623025的博客
05-27 343
web开发模式分为两种，一种是服务器渲染页面信息将页面直接传递给浏览器，一种是前后端分离，前端负责页面UI，后端负责编写接口，这种就得浏览器去运行代码，减轻服务器的压力。在使用express-session之前我们要先下载相关的express-session包，在终端执行命令。如果登录成功也要修改用户登录状态，退出的时候除了要将session清除还要修改用户登录的状态。在开发之前，我们知道服务器和浏览器之间运作的流程是怎么样的。因为还没有登录信息所以服务器是没有用户信息的。看看查看用户信息能不能正常使用。
express中简单的使用token
ananzhangwei的博客
05-12 1747
简单的实现express中实现token
express 登录鉴权以及接口级别的权限控制
最新发布
Joey_Tribiani的博客
11-15 642
按照上述的方式，我们就完成了express搭建的后台应用的登录和接口鉴权操作。
NodeJS中Express框架实现用户登录，注册，及接口token授权验证
junkaione的博客
01-25 6548
后端开发中，用户登录，注册，及其他接口的token验证是必需的，以前开发时会在用户登录时存一个session，但是现在token验证的方式更多也更好。这篇文章教大家实现密码加密保存及解密验证，还有token生成及验证。
【token】一.token的作用；二.Express中实现token的方法
weixin_44892365的博客
01-03 1246
【token】一.token的作用;二.Express中实现token的方法
tornado如何实现app和web同时token鉴权
03-23
Tornado可以通过使用JWT（JSON Web Token）来实现同时对App和Web进行Token鉴权。 JWT是一种基于JSON的开放标准（RFC 7519），用于在网络上安全地传输信息。它由三部分组成：Header、Payload和Signature。其中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lionliu0519

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值