Astro前端集成JWT认证：对接Spring Boot后端实现登录鉴权功能

一、封装全局请求工具（统一处理Token携带与401拦截） #

为避免重复编写请求头和错误处理逻辑，封装一个全局请求函数，自动携带Token并拦截401未授权响应：

// src/utils/api.js
export async function apiRequest(url, options = {}) {
  // 从本地存储获取Token
  const token = localStorage.getItem('jwt_token');
  
  // 构建请求头，默认携带Content-Type，有Token则加Authorization
  const headers = {
    'Content-Type': 'application/json',
    ...options.headers,
  };
  if (token) {
    headers['Authorization'] = `Bearer ${token}`;
  }

  try {
    const response = await fetch(url, {
      ...options,
      headers,
    });

    // 拦截401响应：删除Token并跳转登录页
    if (response.status === 401) {
      localStorage.removeItem('jwt_token');
      window.location.href = '/login';
      throw new Error('未授权，请重新登录');
    }

    return response;
  } catch (error) {
    console.error('请求出错:', error);
    throw error;
  }
}

使用示例：替代原生fetch调用后端接口

import { apiRequest } from '../utils/api.js';

async function getUserInfo() {
  const response = await apiRequest('/api/user/info');
  const userData = await response.json();
  // 处理用户数据
}

二、登录页面实现（获取并存储Token） #

创建登录页面，处理表单提交，从后端获取Token并存入本地存储：

---
// src/pages/login.astro
---
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>登录</title>
</head>
<body>
  <div class="login-form">
    <h2>登录</h2>
    <input type="text" id="username" placeholder="用户名" />
    <input type="password" id="password" placeholder="密码" />
    <button id="loginBtn">登录</button>
  </div>

  <script is:inline>
    // 客户端登录逻辑
    document.getElementById('loginBtn').addEventListener('click', async () => {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      try {
        // 调用Spring Boot登录接口
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ username, password }),
        });

        if (response.ok) {
          const data = await response.json();
          // 将Token存入本地存储
          localStorage.setItem('jwt_token', data.token);
          // 跳转至主页或权限页面
          window.location.href = '/';
        } else {
          alert('登录失败，请检查用户名或密码');
        }
      } catch (error) {
        console.error('登录请求出错:', error);
        alert('登录请求失败，请稍后重试');
      }
    });
  </script>
</body>
</html>

三、页面权限控制（无Token自动跳转登录） #

方式1：单个页面添加权限判断 #

在需要权限的页面中加入客户端脚本，页面加载时检查Token：

---
// src/pages/index.astro
---
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>主页</title>
</head>
<body>
  <h1>欢迎访问主页</h1>

  <script is:inline>
    // 页面加载时检查Token
    window.addEventListener('load', () => {
      const token = localStorage.getItem('jwt_token');
      if (!token) {
        window.location.href = '/login';
      }
    });
  </script>
</body>
</html>

方式2：全局布局统一处理 #

若多个页面需要权限，创建权限布局组件，所有权限页面复用该布局：

---
// src/layouts/AuthLayout.astro
const { children, title } = Astro.props;
---
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{title || '权限页面'}</title>
</head>
<body>
  {children}

  <script is:inline>
    window.addEventListener('load', () => {
      const token = localStorage.getItem('jwt_token');
      if (!token) {
        window.location.href = '/login';
      }
    });
  </script>
</body>
</html>

使用示例：在权限页面中引入布局

---
// src/pages/dashboard.astro
import AuthLayout from '../layouts/AuthLayout.astro';
---
<AuthLayout title="控制台">
  <h1>控制台首页</h1>
  <!-- 页面内容 -->
</AuthLayout>

四、与Vue实现的区别说明 #

你在Vue中用Store管理Token，Astro中无需复杂状态管理：直接操作localStorage即可满足需求，因为Token仅需持久化存储，无需在多组件间共享复杂状态。若后续需存储用户信息等，同样可存入localStorage，或使用Astro服务端状态Astro.locals（仅服务端可用）。

内容的提问来源于stack exchange，提问作者salat_