脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → Express拦截器功能

Express框架实现简单拦截器功能示例

 更新时间：2023年05月17日 09:13:05   作者：Teacher_Tian_2019  
这篇文章主要介绍了Express框架实现简单拦截器功能,结合实例形式分析了express框架拦截器相关功能与使用方法,需要的朋友可以参考下

1、前言

  在前文express框架+bootstrap美化ejs模板提到，考试成绩属于非公开的数据。需要根据浏览器端访问的用户的身份进行判断，如果是有权限的用户才会返回相应的数据。这种功能就是本节我要说明的“拦截器”。

2、分析

  首先，要完成拦截器的功能，需要有session的支持，我们需要下载express-session模块：

npm install --save express-session

3、开发过程

3.1、引入express-session模块

  在入口脚本app.js中，引入express-session模块：

var session = require("express-session");

3.2、完成session配置

  在入口脚本app.js中，设置session到app上，完成session的配置：

// 设置session中间件
app.use(session({
  secret: 'keyboard cat',
  resave: false,              //强制保存 session 即使它并没有变化,。默认为 true。建议设置成 false
  saveUninitialized: true,
  cookie: {
    // secure: true,
    maxAge:2*60*60*1000                 /*过期时间*/
  },
  rolling:true                //在每次请求时重新设置 cookie，用于重置 cookie 过期时间（默认：false）
}))

3.3、拦截器代码编写

  因为app.js是站点访问的入口文件，所以为了尽可能的拦截所有的web请求，拦截器需要写在所有的app.use（准确地说，是所有的路由）前。下面是从app.js中截取出来的代码片断：

//添加拦截器
app.use(function (req, res, next) {
  if(req.session.user){
    //已经登录过的用户（存在session）
    console.log("这个用户已经登陆：" + req.session.user.u_name);
    next();
  }else{
    //用户没有登录（session）前
    var arr = req.url.split('/');
    //去除get请求携带的参数
    for (var i = 0; i < arr.length; i++) {
        arr[i] = arr[i].split('?')[0];
    }
    //罗列所有无需权限检查的路由
    if (arr[1] === 'login' || arr[1] === 'logout' || arr[1] === '') {
      next();
    } else {
      //最初请求的链接也做为参数传递给login页面
      res.redirect('/login' + req.url);  // 将用户重定向到登录页面
      res.end();
    }
  }
});
/* 尽可能让拦截器在所有路由的前边 */
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
/* 略 */

3.4、登录功能开发

  在app.js上方，先引入一个路由文件，它可以为我们提供登录的get和post请求处理；

var loginRouter = require('./routes/login');

  在app.js文件中，将loginRouter绑定到/login这个路径上：
在这里插入图片描述
  像上边这样，app.js的改造就完成了。接下来看一看./routes/login.js的代码吧：

var express = require('express');
var router = express.Router();
/* GET login */
router.get('/', function(req, res, next) {
  if(req.session.user){
    res.redirect("/");  // 将用户重定向到登录页面
    res.end();
  }else{
    res.render('login', {redirect_path:""});
  }
});
router.get('/:redirect_path', function(req, res, next) {
  var redirect_path = req.params.redirect_path || "/";
  if(req.session.user){
    res.redirect("/" + redirect_path);  // 将用户重定向到登录页面
    res.end();
  }else{
    res.render('login', {redirect_path});
  }
});
/* POST login */
router.post('/', function(req, res, next) {
  var {u_name,u_password,redirect_path} = req.body;
  var user = {u_name,u_password};
  //密码校验
  //仅仅是个模板，省略了从数据库查询的过程
  if((u_name == "张三" || u_name == "李四") && u_password == "123456"){
    //写入session
    // req.session.user = {u_name,u_password};
    req.session.regenerate(() => {
      req.session.user = user;
      req.session.success = "Authenticated as " + user.u_name;
      res.redirect("/" + redirect_path);  // 将用户重定向到登录页面
      res.end();
    });
  }else{
    //认证失败
    res.redirect('/login' + req.url);  // 将用户重定向到登录页面
    res.end();
  }
});
module.exports = router;

  在./routes/login.js中提及了login.ejs模板，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Login</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <form action="/login" method="POST">
      <div>
        <input type="hidden" name="redirect_path" value = "<%=redirect_path%>">
      </div>
      <div>
          用户名：<input type="text" name="u_name" />
      </div>
      <div>
          密码：<input type="password" name="u_password" />
      </div>
      <div>
        <input type="submit" value="登录">
      </div>
    </form>
  </body>
</html>

  同时，我在这里把score.ejs模板的代码也贴出来（为本次演示功能的开发做了一些调整）：

<!DOCTYPE html>
<html>
  <head>
    <title>成绩单</title>
    <!-- 引入bootstrap样式文件 注意这里的href是相对于public目录的 -->
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" >
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div><%= year %>年高考成绩查询（<%= u_name%>）</div>
    <table>
        <% scores.forEach(function(item,index){ %>
            <tr><td><%= index + 1 %></td><td><%=item.course %></td><td><%=item.score %></td></tr>
        <% }); %>
    </table>
  </body>
</html>

4、验证

  完成以上主要步骤之后，可以启动网站试试了！
初次访问一下http://localhost:3000/system，结果是下边这样的：
在这里插入图片描述
  有没有发现，页面重定向到了登录页面，此时链接也变成了localhost:3000/login/system，其实system是一个路由参数（用于告诉服务器，在登录成功之后重定向的位置）。填写账号/密码信息：李四/123456后，效果如下：
在这里插入图片描述
  再进一步验证一下，把浏览器关闭，确保已经与服务器断开了链接，重新访问主页，按照login.js中的拦截规则，主页/是不被拦截的。
在这里插入图片描述
   果真如此。

4、写在最后

  整理到这里就结束了，虽然描述得不是很细致，但在以上章节的代码中，我想信你可能能体会到拦截器的用途；并可以参照案例的代码完成你的练习。
  最近，在某项目实践的过程中，发现lowdb这种非常轻便小巧的数据库，我也成功地在express项目中完成了CRUD等基本功能。那一下节，我就介绍一下这个数据库，并讲一讲如何在express项目中使用lowdb数据库完成基本的CRUD操作吧。

您可能感兴趣的文章:

相关文章

  • Node.js Express安装与使用教程

    Node.js Express安装与使用教程

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，这篇文章主要介绍了Node.js Express安装与使用教程，非常具有实用价值，需要的朋友可以参考下
    2018-05-05
  • node文件资源管理器的解压缩从零实现

    node文件资源管理器的解压缩从零实现

    这篇文章主要为大家介绍了node文件资源管理器的解压缩从零实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • Ubuntu 16.04 64位中搭建Node.js开发环境教程

    Ubuntu 16.04 64位中搭建Node.js开发环境教程

    如果想要在Ubuntu 16.04上安装Node.js的话，这篇文章对你来说肯定很重要。Node.js从本质上来说就是一个运行在服务端上的封装好了输入输出流的javascript程序。本文给大家详细介绍了在Ubuntu 16.04 64位搭建Node.js开发环境的步骤，有需要的朋友们可以参考学习。
    2016-10-10
  • node通过express搭建自己的服务器

    node通过express搭建自己的服务器

    本篇文章主要介绍了node通过express搭建自己的服务器 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 解决npm i 报错以及python安装卡住的问题

    解决npm i 报错以及python安装卡住的问题

    这篇文章主要介绍了解决npm i 报错以及python安装卡住的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)

    如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)

    这篇文章主要介绍了如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Node.js 中判断一个文件是否存在

    Node.js 中判断一个文件是否存在

    这篇文章主要记录一些 Node.js 应用中的小知识点，如果你 Google/Baidu “Node.js 如何判断文件是否存在” 发现给出的很多答案还是使用的 fs.exists，这里不推荐使用 fs.exists 你可以选择 fs.stat 或 fs.access。
    2020-08-08
  • nodeJs的安装与npm全局环境变量的配置详解

    nodeJs的安装与npm全局环境变量的配置详解

    这篇文章主要介绍了nodeJs的安装与npm全局环境变量的配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • node中http模块的使用及执行流程

    node中http模块的使用及执行流程

    http这个模块的职责就是帮你创建编写服务器，接下来通过本文给大家介绍node中http模块的使用及执行流程，感兴趣的朋友一起看看吧
    2021-09-09
  • Nodejs进阶：如何将图片转成datauri嵌入到网页中去实例

    Nodejs进阶：如何将图片转成datauri嵌入到网页中去实例

    这篇文章主要介绍了Nodejs进阶：如何将图片转成datauri嵌入到网页中去,有兴趣的可以了解一下。
    2016-11-11

最新评论