如何为Tea Stack前端集成后端API？求极简认证与存储工具

完全基于现有技术栈（TailwindCSS、Eleventy、AlpineJS）+ 浏览器原生能力实现，无需引入重型框架或库。

1. 敏感凭证存储 #

不用额外工具，直接用浏览器的localStorage或sessionStorage存储后端返回的认证Token（绝对不要存明文密码）：

• localStorage：Token持久化，关闭浏览器后仍保留
• sessionStorage：仅当前会话有效，关闭浏览器自动清空，适合临时登录场景

登录成功后存储Token的代码示例：

localStorage.setItem('auth_token', response.data.token);

2. 登录逻辑（AlpineJS实现） #

在登录页面编写Alpine组件，处理表单提交、API调用与Token存储：

<div x-data="{ email: '', password: '', error: '' }" class="max-w-md mx-auto mt-10">
  <input 
    type="email" 
    x-model="email" 
    placeholder="邮箱"
    class="w-full p-2 mb-4 border rounded"
  >
  <input 
    type="password" 
    x-model="password" 
    placeholder="密码"
    class="w-full p-2 mb-4 border rounded"
  >
  <button 
    @click="login"
    class="w-full p-2 bg-blue-500 text-white rounded"
  >登录</button>
  <p x-show="error" class="mt-4 text-red-500 text-center">{{ error }}</p>

  <script>
    async function login() {
      this.error = '';
      try {
        const res = await fetch('/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email: this.email, password: this.password })
        });
        const data = await res.json();
        
        if (data.token) {
          localStorage.setItem('auth_token', data.token);
          window.location.href = '/dashboard';
        } else {
          this.error = data.message || '登录失败';
        }
      } catch (err) {
        this.error = '网络错误，请稍后重试';
      }
    }
  </script>
</div>

这里用原生fetch替代Axios，更轻量且无需额外依赖。

3. 页面权限控制 #

登录页面拦截（客户端侧校验） #

对需要登录才能访问的页面，用Alpine的x-init钩子在页面加载时检查Token，不存在则跳转登录页：

<div 
  x-data="{ 
    init() {
      const token = localStorage.getItem('auth_token');
      if (!token) window.location.href = '/login';
    }
  }" 
  x-init="init()"
>
  <!-- 登录后可见的页面内容 -->
</div>

全局导航动态显示 #

在Eleventy的全局导航组件中，用Alpine控制登录/注销按钮的显示状态：

<nav x-data="{ isLoggedIn: !!localStorage.getItem('auth_token') }" class="flex gap-4 p-4 bg-gray-100">
  <a href="/" class="text-blue-500">首页</a>
  <template x-if="isLoggedIn">
    <>
      <a href="/dashboard" class="text-blue-500">控制台</a>
      <button 
        @click="logout"
        class="text-red-500"
      >注销</button>
    </>
  </template>
  <template x-if="!isLoggedIn">
    <a href="/login" class="text-blue-500">登录</a>
  </template>

  <script>
    function logout() {
      localStorage.removeItem('auth_token');
      window.location.href = '/';
    }
  </script>
</nav>

4. 认证请求封装 #

写一个全局工具函数，自动给需要认证的API请求带上Token，并处理Token过期场景：

// 在全局JS文件（如utils.js）中定义
async function authenticatedRequest(url, options = {}) {
  const token = localStorage.getItem('auth_token');
  const headers = {
    'Content-Type': 'application/json',
    ...options.headers,
  };
  
  if (token) {
    headers['Authorization'] = `Bearer ${token}`;
  }

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

  // 处理Token过期（后端返回401状态码）
  if (response.status === 401) {
    localStorage.removeItem('auth_token');
    window.location.href = '/login';
    throw new Error('登录已过期，请重新登录');
  }

  return response.json();
}

在Alpine组件中调用示例：

// 获取当前用户信息
authenticatedRequest('/api/user')
  .then(user => console.log('用户信息：', user))
  .catch(err => console.error(err));

注意事项 #

• 绝对不要在localStorage/sessionStorage中存储明文密码或其他敏感凭证，仅存储后端返回的认证Token
• 若需更高安全性，可配合后端使用HttpOnly Cookie存储Token（需后端配置跨域Cookie规则）
• Eleventy生成的是静态页面，所有权限校验均在客户端完成，敏感数据必须通过API动态获取，不可硬编码在页面源码中

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