实践前后端token验证，保障网络安全

前端

2024-02-17 21:00:19

在网络安全中掌握身份验证：一个前后端 Token 验证系统的分步指南

前言

在现代的网络世界中，保障用户身份和数据安全至关重要。令牌验证是一种广泛使用的安全机制，可帮助服务器验证客户端的身份，并授予他们访问特定资源的权限。

构建一个 Token 验证系统

为了深入了解 Token 验证，我们将分步构建一个完整的前后端系统，使用流行的 JSON Web Token (JWT) 格式。

后端

1. 安装依赖

npm install express jsonwebtoken

2. 创建服务器

const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();
const port = 3000;

app.post('/login', (req, res) => {
  // 模拟用户验证
  if (req.body.username === 'admin' && req.body.password === 'password') {
    // 颁发 JWT 令牌
    const token = jwt.sign({ username: 'admin' }, 'my-secret-key');
    res.json({ token });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
});

app.get('/protected', (req, res) => {
  // 从请求头中获取令牌
  const token = req.headers['authorization'];

  // 验证令牌
  jwt.verify(token, 'my-secret-key', (err, decoded) => {
    if (err) {
      res.status(401).json({ error: 'Invalid token' });
    } else {
      res.json({ message: 'Hello, ' + decoded.username });
    }
  });
});

app.listen(port);

前端

1. 安装依赖

npm install jwt-decode

2. 创建登录页面

<form id="login-form">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

3. 创建登录脚本

const loginForm = document.getElementById('login-form');

loginForm.addEventListener('submit', (event) => {
  event.preventDefault();

  // 发送登录请求，获取令牌
  fetch('http://localhost:3000/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: event.target.querySelector('input[name="username"]').value,
      password: event.target.querySelector('input[name="password"]').value
    })
  })
  .then(res => res.json())
  .then(data => {
    // 存储令牌，并跳转到受保护页面
    localStorage.setItem('token', data.token);
    window.location.href = '/protected';
  })
  .catch(err => {
    alert('Login failed');
  });
});

4. 创建受保护页面

<h1>Hello, world!</h1>

5. 创建验证脚本

// 获取令牌
const token = localStorage.getItem('token');

// 验证令牌
jwt.verify(token, 'my-secret-key', (err, decoded) => {
  if (err) {
    // 跳转到登录页面
    window.location.href = '/login';
  } else {
    // 访问受保护页面
    console.log('Hello, ' + decoded.username);
  }
});