Express+Nodejs 下的登录拦截实现代码

下面是Express+Nodejs下的登录拦截实现代码的攻略：

一、前置知识

在学习登录拦截实现之前，需要掌握以下知识：

Node.js基础知识，包括模块化、文件系统、HTTP模块等；
Express框架的基本使用方法；
cookie和session的基本概念和使用方法。

二、实现登录拦截的基本思路

实现登录拦截需要结合cookie和session技术，其基本思路如下：

在登录时，将用户信息写入session，并将session的ID保存在cookie中；
在需要对用户进行登录拦截的路由中，检查用户请求中的cookie中是否有session ID，如果有，则根据session ID读取对应的session，并判断用户是否已登录；
如果用户已登录，则正常显示页面；否则，跳转到登录页或提示用户未登录的信息。

三、实现代码

1. 安装所需依赖

在Express项目根目录下执行以下命令：

npm install --save express-session cookie-parser

2. 在app.js中添加中间件

const express = require('express');
const cookieParser = require('cookie-parser');
const session = require('express-session');

const app = express();

app.use(cookieParser());
app.use(session({
  name: 'sid', // session ID在cookie中的名称
  secret: '12345', // 将session ID加密的字符串
  resave: false,
  saveUninitialized: true,
  cookie: {
    maxAge: 1000 * 60 * 60 * 24 * 7 // session过期时间为一周
  }
}));

3. 编写登录接口

app.post('/login', (req, res) => {
  // 处理登录逻辑，假设登录成功后，将用户信息保存在req.session.user中
  req.session.user = {
    name: 'xiaoming',
    age: 20
  };
  res.send('login success');
});

4. 编写需要登录拦截的路由

app.get('/profile', (req, res) => {
  if (req.session.user) { // 判断session中是否存在用户信息
    res.send(`Hello, ${req.session.user.name}`);
  } else {
    res.redirect('/login'); // 未登录，跳转到登录页
  }
});

5. 编写登录页路由

app.get('/login', (req, res) => {
  res.send(`
    <form method="POST" action="/login">
      <input type="text" name="name" placeholder="请输入用户名">
      <input type="text" name="password" placeholder="请输入密码">
      <button type="submit">登录</button>
    </form>
  `);
});

6. 完整示例

const express = require('express');
const cookieParser = require('cookie-parser');
const session = require('express-session');

const app = express();

app.use(cookieParser());
app.use(session({
  name: 'sid', // session ID在cookie中的名称
  secret: '12345', // 将session ID加密的字符串
  resave: false,
  saveUninitialized: true,
  cookie: {
    maxAge: 1000 * 60 * 60 * 24 * 7 // session过期时间为一周
  }
}));

// 登录接口
app.post('/login', (req, res) => {
  // 处理登录逻辑，假设登录成功后，将用户信息保存在req.session.user中
  req.session.user = {
    name: 'xiaoming',
    age: 20
  };
  res.send('login success');
});

// 需要登录拦截的路由
app.get('/profile', (req, res) => {
  if (req.session.user) { // 判断session中是否存在用户信息
    res.send(`Hello, ${req.session.user.name}`);
  } else {
    res.redirect('/login'); // 未登录，跳转到登录页
  }
});

// 登录页路由
app.get('/login', (req, res) => {
  res.send(`
    <form method="POST" action="/login">
      <input type="text" name="name" placeholder="请输入用户名">
      <input type="text" name="password" placeholder="请输入密码">
      <button type="submit">登录</button>
    </form>
  `);
});

app.listen(3000, () => {
  console.log('server start...');
});

7. 示例说明

示例一：已登录状态下访问需要登录拦截的路由

在登录成功后，打开浏览器访问http://localhost:3000/profile，输出结果为：

Hello, xiaoming

说明已经登录成功，可以正常访问需要登录拦截的路由。

示例二：未登录状态下访问需要登录拦截的路由

在未登录状态下，打开浏览器访问http://localhost:3000/profile，会自动跳转到登录页http://localhost:3000/login；填写用户名和密码，验证登录成功后，再次访问http://localhost:3000/profile，输出结果为：

Hello, xiaoming