嗨，老铁，先聊聊 Vibe Coding 的全栈实战

说实话，我一开始写这个项目的时候，脑子里全是“哎呀，又要搞鉴权了”。

你们懂的，前端登录了后端却不管闲事，那不就跟门口挂个招牌，却没人检查来客身份吗？

哈哈，这不就是我们今天要拆解的核心——前后端鉴权。

咱们的系统里有几类 API 必须受保护：

/api/chat/api/chat/stream/api/retrieve。

而健康检查 /api/health 必须保持公开，否则容器活不过。

所以我们得在路由层面明确声明哪些需要鉴权，哪些不需要。

这里我们选用了 JWT，因为它轻量、易于本地校验。

核心代码大概长这样：

def get_current_user(
    request: Request,
    credentials: HTTPAuthorizationCredentials | None = Depends,
) -> UserContext:
    if credentials is None:
        raise HTTPException
    token = credentials.credentials
    try:
        payload = jwt.decode
    except JWTError as exc:
        raise HTTPException
    if payload.get != "access":
        raise HTTPException
    user_id = payload.get
    if not user_id:
        raise HTTPException
    username = payload.get
    return UserContext, username=str)

kan，这段代码只Zuo三件事：拿到 token → 解码校验 → 把用户信息塞进 UserContext。

以后业务层只要注入 UserContext，就Neng知道当前请求是谁发来的。

别让每个页面自己去拼 header，那会炸裂成万花筒。我们把所有需要鉴权的请求dou走同一个函数。

export async function fetchWithAuth:Promise{
  const full = url.startsWith?url:`${BASE_URL}${url}`;
  const token = await getTokenFn?.;
  const headers = new Headers;
  if headers.set;
  if) headers.set;
  let resp = await fetch;
  // 401 刷新
  if){
      const newToken = await refreshAndGetToken;
      if{
          headers.set;
          headers.set;
          return fetch;
      }
      // 刷新也不行，就派发会话失效事件
      window.dispatchEvent);
  }
  return resp;
}

这段代码干了两件事：自动带上Zui新的 access_token；遇到 401 时尝试刷新一次然后再重试。

想象一下：页面一次性发起三个请求，dou恰好发现 token Yi过期。Ru果每个dou去刷新的话，你的 auth-center 会收到三条重复请求，浪费资源，还可Neng导致 race condition。

我们在前端加了个「刷新锁」：

let refreshPromise:Promise|null=null;
async function refreshAndGetToken:Promise{
  if return refreshPromise;
  refreshPromise = =>{
    try{
      const res = await fetch;
      if{
        const data = await res.json;
        return data.access_token;
      }
      return null;
    }catch{
      return null;
    }finally{
      refreshPromise=null;
    }
  });
  return refreshPromise;
}

这样，无论多少并发请求，只会有一次真正的刷新操作，其他请求dou等着同一个 Promise 的结果。

登录是「我是谁？」的过程，得到一堆 token 并存到本地。

鉴权是「我这次请求真的来自谁？」的验证，每次 API 调用dou要把 token 带上，让后端核对。

所以别把 AuthContext 当成全局网络层，它只负责管理状态；网络层只负责拿到Zui新 token 并发送请求，两者解耦才不会互相循环依赖。

Ru果刷新也失败，那只Neng让用户重新登录。

我们在前端统一派发一个自定义事件：

window.dispatchEvent);

`AuthContext` 那边监听这个事件，一旦收到就弹出登录页或跳转到 auth-center。这样业务层不用关心细节，只要专心渲染 UI 就行啦。

- 你的网站Ru果返回了大量 JS 渲染内容，而没有Zuo好 SSR 或 pre‑render，爬虫hen难抓取到实际文本。 - 再者，Ru果 robots.txt 把 /api/ 或 /static/ 给屏蔽了也会导致搜索引擎直接放弃抓取。 - Zui后Ru果页面加载速度慢，百度会认为体验不好，从而降低收录优先级。 解决办法：开启服务端渲染或预渲染关键页面；检查 robots 配置；使用 CDN 加速静态资源，让首屏渲染时间控制在两秒以内。 八、完整链路回顾

sequenceDiagram
   participant U as 用户
   participant FE as 前端 UI
   participant AC as AuthCenter
   participant TM as TokenManager
   participant API as api-client.ts
   participant BE as 后端 API
   U->FE: 打开首页
   FE->AC: 重定向获取授权码
   AC-->FE: 返回 access & refresh token
   FE->TM: 存入 TokenManager
   U->FE: 发起聊天请求
   FE->API: fetchWithAuth
   API->TM: getTokenFn
   TM-->API: access_token
   API->BE: Authorization: Bearer xxx
   BE->BE: JWT 验证 + UserContext 注入
   BE-->API: 正常返回数据
   Note over API,BE: 若 token Yi过期
→ 返回 401
→ 前端自动刷新再重试
   alt 刷新成功
       TM->AC: 请求新 access_token
       AC-->TM: 返回 new_token
       TM-->API: 新 token 回传并重试原请求
       API-->BE: 
携带 Authorization
       BE-->API: 正常响应
   else 刷新失败
       API->FE: 派发 auth:session-expired 事件
       FE->U: 跳转登录页重新授权
   end

P1. AUTOMATIC TOKEN INJECTION： 所有业务接口统一走 fetchWithAuth, 不漏任何一处鉴权点。

P2. SINGLE REFRESH LOCK： 并发时只触发一次刷新，请求共享结果，防止刷爆 auth‑center。

P3. CLEAR ROUTE BOUNDARY： /api/health 保持公开，其余路由显式声明 @Depends, 可读性强且易于测试。

P4. EFFECTIVE SESSION EXPIRY HANDLING： 统一事件机制让 UI 层只关心「登录失效」而不是细节实现。

P5. SCALE FRIENDLY： 后端本地 JWT 校验省掉跨服务调用，降低延迟，也geng适合水平扩容。

- 写完鉴权后一定跑下并发测试，不然上线后用户会kan到“突然弹窗要求重新登录”。 - 把 JWT secret 放进环境变量，不要硬编码在代码里否则泄漏风险极高。 - 前端Ru果用 React Context 管理 AuthState，一定记得在组件卸载时清理 event listener，不然内存泄漏会悄悄爬上来。 - 想让 SEO geng友好？关键页面Zuo SSR，把首屏内容直接写进 HTML，这样百度和其他搜索引擎就Neng抓取到真实文字，而不是等 JS 再跑出来。 ——玩转全栈鉴权，你也Ke以！ 🚀

说实话，这套方案Yi经在我的 Vibe Coding 项目里跑通两个月了。 整个流程基本Zuo到「用户无感知」：他们打开聊天窗口，只kan到 AI 的回答，而后台Yi经默默完成了所有安全校验。 Ru果你还有别的坑想聊，或者想听我讲讲怎么把 AI 辅助写代码玩出花样，随时叫我哈。 咱们下回继续聊geng高级的话题，比如基于角色的权限体系或者多租户隔离。 记得关注一下我可不会忘记给你扔点干货的！ 😁