• 售前

  • 售后

热门帖子
入门百科

node脚手架搭建服务器实现token验证的方法

[复制链接]
爱晚风愁制 显示全部楼层 发表于 2021-10-25 20:14:27 |阅读模式 打印 上一主题 下一主题
内容


      
  • 用脚手架快速搭建 node 项目  
  • 用 mysql 毗连池实现与数据库的交互  
  • 用 jsonwebtoken 实现 token 身份验证  
  • 综合案例:用简介登录页面实现上述内容
1. 快速搭建 node 项目


我们都知道 express 框架可高效的开辟 node 服务器,但对于底层的搭建还要靠本技艺写。然而 express-generator 的出现就很好地解决了此题目,它可一键为我们天生项目根本骨架,可谓node 脚手架
1.1 天生项目


①:起首全局安装 express : npm install express -g
②:接着全局安装 express-generator:npm install express-generator -g
③:然后使用命令创建项目: express token_learn(项目名称)
1.2 修改入口文件


对于好多风俗了手撸服务器的人,app.js 总是让人难忘,怎样此骨架中入口文件为 www.js。此时我们可以手动修改app.js 代码,让其成为我们的入口文件
示例:
  1. var express = require('express');
  2. var path = require('path');
  3. var cookieParser = require('cookie-parser');
  4. const index = require('./routes/index');
  5. const users = require('./routes/users');
  6. const app = express();
  7. app.use(express.json());
  8. app.use(express.urlencoded({ extended: false }));
  9. app.use(cookieParser());
  10. app.use(express.static(path.join(__dirname, 'public')));
  11. app.use('/', index);
  12. app.use('/users', users);
  13. app.listen(3000, () => console.log('server is run 3000'))
复制代码
2. 毗连mysql 数据库


此处采用毗连池的方式举行毗连(高效安全)
2.1 创建毗连


①:安装 mysql 模块:npm i mysql
②:在项目根目录下配置毗连池
起首在项目根目录下创建 util 文件夹,文件夹下创建 bdconfig.js 文件
bdconfig.js
  1. const mysql = require('mysql');
  2. module.exports = {
  3.   mysqlParams: {
  4.     host: 'localhost', //域名
  5.     port: '3306', //端口
  6.     user: 'root', //用户名
  7.     password: 'myroot', //密码
  8.     database: 'nodeapi' //数据库
  9.   },
  10.   sySqlConnect(sql, sqlArr) {
  11.     return new Promise((resolve, reject) => { //用Promise对象将其改造,方便接收数据
  12.       const pool = mysql.createPool(this.mysqlParams);
  13.       pool.getConnection((err, conn) => {
  14.         if (err) {
  15.           reject(err)
  16.         } else {
  17.           conn.query(sql, sqlArr, (err, data) => { //操作数据库
  18.             if (err) {
  19.               reject(err)
  20.             } else {
  21.               resolve(data)
  22.             }
  23.           })
  24.           conn.release() //释放连接
  25.         }
  26.       })
  27.     })
  28.   }
  29. }
复制代码
2.2 使用毗连


使用时只需要传入 sql(sql语句)、sqlArr(参数),通过Promise 改造后可直接用返回值拿到效果
3. token 身份验证


随着web 的发展,session、cookie 的验证方式毛病也愈发突出,此时token孕育而生,token的强盛不但限于其是无状态的,还在于它可以跨域
3.1 实现步调


①:起首安装 jsonwebtoken 模块:npm i jsonwebtoken
②:接着在项目中使用该模块
  1. const dbConfig = require('../util/dbconfig');
  2. const jwt = require('jsonwebtoken');
  3. const secret = 'login-rule'; //秘钥规则(自定义)
  4. token = async(req, res, next) => { //定义token验证中间件函数(应用于除登录外的每个请求)
  5.   if (req.headers.authorization) {
  6.     const token = req.headers.authorization;
  7.     const { id, username } = jwt.verify(token, secret); // 对token进行解密查找
  8.     let sql = 'select * from test where id=?';
  9.     let sqlArr = [id];
  10.     let result = await dbConfig.sySqlConnect(sql, sqlArr);
  11.     if (result.length === 0) {
  12.       res.status(200).send({ msg: '用户错误' })
  13.       return
  14.     }
  15.     if (username !== result[0].username) {
  16.       res.status(200).send({ msg: '用户错误' })
  17.     } else {
  18.       next()
  19.     }
  20.   } else {
  21.     res.status(200).send({ msg: '无效请求头' })
  22.   }
  23. }
  24. login = async(req, res) => { //定义登录接口(因为这个请求头不携带token,所以引用在token验证中间件之前)
  25.   let { username, password } = req.body;
  26.   let sql = 'select * from test where username=?';
  27.   let sqlArr = [username];
  28.   let result = await dbConfig.sySqlConnect(sql, sqlArr);
  29.   if (result.length) {
  30.     if (password === result[0].password) {
  31.       const { id, username } = result[0];
  32.       //对token进行加密响应个客户端(参数1:传值规则;参数2:加密规则; 参数3:定义时间)
  33.       const token = jwt.sign({ id, username }, secret, { expiresIn: 60 * 60 });
  34.       res.status(200).send({ msg: '登陆成功', token: token, status: 200 });
  35.     } else {
  36.       res.status(200).send({ msg: '登陆失败', status: 422 });
  37.     }
  38.   } else {
  39.     res.status(200).send({ msg: '用户名不存在', status: 401 })
  40.   }
  41. }
  42. // 验证身份中间件
  43. module.exports = {
  44.   token,
  45.   login
  46. }
复制代码
③:在 app.js 中举行配置
  1. // 写在 app.use() 之后,路由之前
  2. app.use('/users/loginjwt', token.login); //登录接口(无需验证token,所以写在token中间件之前)
  3. app.use(token.token);
复制代码
4. 案例实现 token


4.1 原理阐述


为确保身份唯一且有效:用户每次发送登录哀求且登录成功,服务器端都会相应给用户一个含用户信息(唯一)的加密 token(字符串),此时用户吸取到 token,并把 token 存储在 sessionStorage 或 localStorage中(此处为)。同时用户每次发送其他哀求时,在哀求头中携带本地的 token,服务器端 token验证中心件拦截哀求,对 token举行解密,得到用户信息并与数据库比对,信息存在则放行(身份验证成功)。
4.2 效果预览



4.3 开始实现


写简便静态页面,且实现ajax 哀求
login.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <script src="../javascripts/jquery.min.js"></script>
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   <form id="loginform">
  11.     <input type="text" name="username">
  12.     <input type="password" name="password">
  13.     <input type="submit" value="登录">
  14.   </form>
  15.   <script>
  16.     $(function() {
  17.       $('#loginform').on('submit', function() {
  18.         const formdata = $(this).serialize()
  19.         $.ajax({
  20.           url: '/users/loginjwt',
  21.           type: 'post',
  22.           data: formdata,
  23.           success(res) {
  24.             if (res.status === 200) {
  25.               window.sessionStorage.setItem('token', res.token);
  26.               location.href = '/user/index.html'
  27.             }
  28.           }
  29.         })
  30.         return false
  31.       })
  32.     })
  33.   </script>
  34. </body>
  35. </html>
复制代码
index.html
  1. <script>
  2.   if (!sessionStorage.getItem('token')) {
  3.     location.href = '/user/login.html'
  4.   }
  5. </script>
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.   <script src="../javascripts/jquery.min.js"></script>
  12.   <title>Document</title>
  13. </head>
  14. <body>
  15.   <h1>welcome index</h1>
  16.   <a href="javascript:;" rel="external nofollow" >退出登录</a>
  17.   <script>
  18.     $(function() {
  19.       $.ajaxSetup({
  20.         // 发送请求前触发
  21.         beforeSend(xhr) {
  22.           // 在此设置自定义请求头
  23.           xhr.setRequestHeader('authorization', sessionStorage.getItem('token'))
  24.         }
  25.       })
  26.       $.ajax({
  27.         url: '/users',
  28.         success(res) {
  29.           console.log(res);
  30.         }
  31.       })
  32.       $('a').on('click', function() {
  33.         sessionStorage.clear();
  34.         location.href = '/user/login.html'
  35.       })
  36.     })
  37.   </script>
  38. </body>
  39. </html>
复制代码
4.4 注意点


值得注意的是,对于 本地 token 的验证(是否存在)肯定要写在页面最顶端(防止页面加载,再次发送用户列表哀求)
对于 ajax哀求头,一个一个加真的很烦,此处用 $ajaxSetup方法,修改ajax 的默认配置 。配置过后,写在其下边的 ajax 哀求,都会带上哀求头。
到此这篇关于node脚手架搭建服务器实现token验证的方法的文章就介绍到这了,更多相关node token验证 内容请搜索草根技术分享从前的文章或继承浏览下面的相关文章盼望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作