实战：前端实现用户认证和授权

<!-- register.html -->

<!DOCTYPE html>
<html>
<head>
  <title>User Registration</title>
</head>
<body>
  <h1>User Registration</h1>
  <form id="registerForm">
    <div>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">Register</button>
  </form>
  <script src="register.js"></script>
</body>
</html>

// register.js

document.getElementById('registerForm').addEventListener('submit', async (event) => {
  event.preventDefault();

  const form = event.target;
  const formData = new FormData(form);

  const response = await fetch('/api/register', {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    alert('Registration successful!');
    window.location.href = '/login.html';
  } else {
    const data = await response.json();
    alert('Registration failed: ' + data.error);
  }
});

在上述代码中，我们创建了一个用户注册页面，包含用户名、密码输入框和注册按钮。当用户填写完成信息后，点击注册按钮会向后端发起注册请求，并处理后端返回的响应。

2.2 用户登录

用户注册完成后，接下来我们实现用户登录功能。用户登录时需要填写用户名和密码，并将登录信息提交到后端进行验证。

<!-- login.html -->

<!DOCTYPE html>
<html>
<head>
  <title>User Login</title>
</head>
<body>
  <h1>User Login</h1>
  <form id="loginForm">
    <div>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">Login</button>
  </form>
  <script src="login.js"></script>
</body>
</html>

// login.js

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

  const form = event.target;
  const formData = new FormData(form);

  const response = await fetch('/api/login', {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    const data = await response.json();
    localStorage.setItem('token', data.token);
    alert('Login successful!');
    window.location.href = '/dashboard.html';
  } else {
    const data = await response.json();
    alert('Login failed: ' + data.error);
  }
});

在上述代码中，我们创建了一个用户登录页面，包含用户名、密码输入框和登录按钮。当用户填写完成信息后，点击登录按钮会向后端发起登录请求，并处理后端返回的响应。如果登录成功，我们将后端返回的令牌保存在本地存储中，以备后续使用。

3. JWT令牌生成与验证

在用户登录成功后，后端会颁发一个JWT令牌给前端。该令牌包含了用户的信息和过期时间，用于验证用户的身份和权限。

3.1 令牌生成

后端需要实现令牌的生成功能。在Node.js中，我们可以使用jsonwebtoken库来生成JWT令牌。

// server.js

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

const secretKey = 'my-secret-key';

app.use(express.json());

app.post('/api/login', (req, res) => {
  // 获取用户输入的用户名和密码
  const { username, password } = req.body;

  // TODO: 根据用户名和密码验证用户身份

  // 如果验证通过，生成JWT令牌并返回给前端
  const token = jwt.sign({ username }, secretKey, { expiresIn: '1h' });
  res.json({ token });
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

在上述代码中，我们使用jwt.sign方法生成JWT令牌，并将用户名作为payload，设置过期时间为1小时。然后将令牌返回给前端。

3.2 令牌验证

前端需要实现令牌的验证功能。我们可以使用jsonwebtoken库来验证JWT令牌。

// dashboard.js

const token = localStorage.getItem('token');

if (token) {
  jwt.verify(token, 'my-secret-key', (err, decoded) => {
    if (err) {
      // 令牌验证失败，跳转到登录页面
      window.location.href = '/login.html';
    } else {
      // 令牌验证成功，显示用户信息和授权内容
      document.getElementById('username').innerText = decoded.username;
      // TODO: 根据用户角色显示不同的功能按钮
    }
  });
} else {
  // 没有令牌，跳转到登录页面
  window.location.href = '/login.html';
}

在上述代码中，我们首先从本地存储中获取JWT令牌，并使用jwt.verify方法验证令牌的有效性。如果令牌验证失败，说明用户未登录或登录已过期，我们将用户重定向到登录页面。如果令牌验证成功，我们可以在前端显示用户信息和根据用户角色显示不同的功能按钮。

4. 访问控制与权限管理

用户登录成功后，我们可以根据用户的角色或权限来限制用户对资源的访问。在本节中，我们演示如何使用前端实现访问控制和权限管理。

4.1 用户角色

我们首先需要定义用户角色。在实际应用中，用户角色通常由后端管理，前端只需根据后端返回的用户信息来进行显示和访问控制。

// server.js

// 假设用户角色由后端管理，这里只是演示
const users = [
  { username: 'admin', password: 'admin123', role: 'admin' },
  { username: 'user', password: 'user123', role: 'user' }
];

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;

  // 根据用户名和密码查找用户
  const user = users.find(u => u.username === username && u.password === password);

  if (user) {
    const token = jwt.sign({ username, role: user.role }, secretKey, { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
});

在上述代码中，我们通过硬编码方式定义了两个用户，其中一个是管理员（admin），另一个是普通用户（user）。在实际应用中，用户信息应该保存在数据库或其他持久化存储中，并由后端进行管理。

4.2 访问控制

在前端，我们可以根据用户角色来限制用户对某些功能的访问。以下是一个简单的示例。

<!-- dashboard.html -->

<!DOCTYPE html>
<html>
<head>
  <title>User Dashboard</title>
</head>
<body>
  <h1>Welcome, <span id="username"></span>!</h1>
  <div id="actions">
    <button id="viewDataBtn">View Data</button>
    <button id="editDataBtn">Edit Data</button>
    <button id="adminActionBtn">Admin Action</button>
  </div>
  <script src="dashboard.js"></script>
</body>
</html>

// dashboard.js

const token = localStorage.getItem('token');

if (token) {
  jwt.verify(token, 'my-secret-key', (err, decoded) => {
    if (err) {
      window.location.href = '/login.html';
    } else {
      document.getElementById('username').innerText = decoded.username;

      const actionsDiv = document.getElementById('actions');
      if (decoded.role === 'admin') {
        // 如果是管理员，显示管理员功能按钮
        actionsDiv.style.display = 'block';
      } else {
        // 否则，隐藏管理员功能按钮
        actionsDiv.style.display = 'none';
      }
    }
  });
} else {
  window.location.href = '/login.html';
}

在上述代码中，我们在用户登录成功后根据用户角色显示或隐藏不同的功能按钮。如果用户是管理员，将显示"Admin Action"按钮，否则隐藏该按钮。

通过访问控制，我们可以灵活地控制用户对资源的访问权限，提高应用的安全性和用户体验。

5. 总结

本篇博客实战了前端实现用户认证和授权的过程，包括用户注册、登录、JWT令牌生成与验证、访问控制和权限管理等方面的内容。通过实际代码示例，我们演示了每个步骤的实现，并展示了如何根据用户角色限制用户对资源的访问权限。

用户认证和授权是现代Web应用中不可或缺的功能，它们能够保护用户隐私和提供更好的用户体验。通过学习本篇博客，希望你对前端实现用户认证和授权有了更深入的了解，并能够应用在实际项目中。感谢阅读！