23.11-登录态联调

// src/lib/auth.ts
import { sign, verify } from 'hono/jwt'
 
export async function generateToken(userId: string, env: Env): Promise<string> {
  return sign(
    {
      userId,
      exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 7,  // 7 天
    },
    env.JWT_SECRET
  )
}
 
export async function verifyToken(token: string, env: Env) {
  try {
    const payload = await verify(token, env.JWT_SECRET)
    return payload
  } catch (error) {
    return null
  }
}

// src/index.ts
import { Hono } from 'hono'
import { generateToken, verifyToken } from './lib/auth'
 
const app = new Hono()
 
// 登录
app.post('/api/auth/login', async (c) => {
  const { email, password } = await c.req.json()
 
  // 验证用户
  const user = await verifyUser(email, password)
 
  if (!user) {
    return c.json({ error: 'Invalid credentials' }, 401)
  }
 
  // 生成 token
  const token = await generateToken(user.id, c.env)
 
  return c.json({
    token,
    user: {
      id: user.id,
      email: user.email,
      name: user.name,
    },
  })
})
 
// 受保护的路由
app.get('/api/profile', async (c) => {
  const authHeader = c.req.header('Authorization')
 
  if (!authHeader?.startsWith('Bearer ')) {
    return c.json({ error: 'Unauthorized' }, 401)
  }
 
  const token = authHeader.slice(7)
  const payload = await verifyToken(token, c.env)
 
  if (!payload) {
    return c.json({ error: 'Invalid token' }, 401)
  }
 
  const user = await getUser(payload.userId)
 
  return c.json({ user })
})

// src/lib/auth-client.ts
const TOKEN_KEY = 'auth_token'
 
export function getToken(): string | null {
  return localStorage.getItem(TOKEN_KEY)
}
 
export function setToken(token: string): void {
  localStorage.setItem(TOKEN_KEY, token)
}
 
export function removeToken(): void {
  localStorage.removeItem(TOKEN_KEY)
}
 
export function isAuthenticated(): boolean {
  return !!getToken()
}

// src/lib/api.ts
import { hc } from 'hono/client'
import type { AppType } from '@api/src/index'
import { getToken, removeToken } from './auth-client'
 
export const api = hc<AppType>(process.env.NEXT_PUBLIC_API_URL!, {
  fetch: async (input, init) => {
    const token = getToken()
    const headers = new Headers(init?.headers)
 
    if (token) {
      headers.set('Authorization', `Bearer ${token}`)
    }
 
    const res = await fetch(input, { ...init, headers })
 
    // 处理 401
    if (res.status === 401) {
      removeToken()
      window.location.href = '/login'
    }
 
    return res
  },
})

// src/app/login/page.tsx
'use client'
 
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { api } from '@/lib/api'
import { setToken } from '@/lib/auth-client'
 
export default function LoginPage() {
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
 
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError('')
    setLoading(true)
 
    try {
      const res = await api.api.auth.login.$post({
        json: { email, password },
      })
 
      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.error || 'Login failed')
      }
 
      const data = await res.json()
      setToken(data.token)
 
      // 跳转到首页
      router.push('/')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Login failed')
    } finally {
      setLoading(false)
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <h1>登录</h1>
      {error && <div className="error">{error}</div>}
      <input
        type="email"
        placeholder="邮箱"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? '登录中...' : '登录'}
      </button>
    </form>
  )
}

// src/index.ts
app.post('/api/auth/refresh', async (c) => {
  const authHeader = c.req.header('Authorization')
 
  if (!authHeader?.startsWith('Bearer ')) {
    return c.json({ error: 'Unauthorized' }, 401)
  }
 
  const token = authHeader.slice(7)
  const payload = await verifyToken(token, c.env)
 
  if (!payload) {
    return c.json({ error: 'Invalid token' }, 401)
  }
 
  // 生成新 token
  const newToken = await generateToken(payload.userId, c.env)
 
  return c.json({ token: newToken })
})

// src/lib/api.ts
import { getToken, setToken, removeToken } from './auth-client'
 
let isRefreshing = false
let refreshPromise: Promise<string> | null = null
 
async function refreshToken(): Promise<string> {
  if (isRefreshing && refreshPromise) {
    return refreshPromise
  }
 
  isRefreshing = true
  refreshPromise = (async () => {
    const currentToken = getToken()
 
    if (!currentToken) {
      throw new Error('No token')
    }
 
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/refresh`, {
      headers: {
        Authorization: `Bearer ${currentToken}`,
      },
    })
 
    if (!res.ok) {
      removeToken()
      window.location.href = '/login'
      throw new Error('Refresh failed')
    }
 
    const data = await res.json()
    setToken(data.token)
 
    isRefreshing = false
    return data.token
  })()
 
  return refreshPromise
}
 
export const api = hc<AppType>(process.env.NEXT_PUBLIC_API_URL!, {
  fetch: async (input, init) => {
    let token = getToken()
 
    if (!token) {
      window.location.href = '/login'
      throw new Error('Not authenticated')
    }
 
    const headers = new Headers(init?.headers)
    headers.set('Authorization', `Bearer ${token}`)
 
    let res = await fetch(input, { ...init, headers })
 
    // 如果 401，尝试刷新 token
    if (res.status === 401) {
      try {
        token = await refreshToken()
        headers.set('Authorization', `Bearer ${token}`)
        res = await fetch(input, { ...init, headers })
      } catch (error) {
        throw error
      }
    }
 
    return res
  },
})

// src/components/AuthGuard.tsx
'use client'
 
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { isAuthenticated } from '@/lib/auth-client'
 
export function AuthGuard({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
 
  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/login')
    } else {
      setLoading(false)
    }
  }, [router])
 
  if (loading) {
    return <div>加载中...</div>
  }
 
  return <>{children}</>
}

// src/app/dashboard/page.tsx
import { AuthGuard } from '@/components/AuthGuard'
 
export default function DashboardPage() {
  return (
    <AuthGuard>
      <h1>仪表盘</h1>
      {/* 受保护的内容 */}
    </AuthGuard>
  )
}

// src/lib/auth-client.ts
export function logout(): void {
  removeToken()
  window.location.href = '/login'
}

// src/components/LogoutButton.tsx
'use client'
 
import { logout } from '@/lib/auth-client'
 
export function LogoutButton() {
  return (
    <button onClick={logout}>
      退出登录
    </button>
  )
}