已通过FastAPI获取JWT令牌，如何使用该令牌访问受保护资源

核心问题先明确：是否需要解码器？ #

前端仅用令牌调用接口时完全不需要解码器；如果需要读取JWT内置的非敏感字段（如用户名、用户ID）做页面展示，仅需对JWT中间的payload段做base64解码即可，无需专门的JWT解码工具。注意：绝对不能基于前端解码结果做权限判断，所有权限校验必须由后端完成，后端需要使用和生成JWT时一致的密钥、算法做解码校验，确保令牌未被篡改、未过期。

前端侧使用步骤 #

你拿到的返回{access_token: 'super long string', token_type: 'bearer'}是标准的OAuth2令牌返回格式，按以下步骤使用即可：

• 第一步：存储令牌
  优先选择存储方案：
  1. HttpOnly 安全Cookie：可避免XSS攻击，需要后端配置返回，不需要前端手动处理携带逻辑
  2. localStorage/sessionStorage：适合前后端分离场景，注意做好XSS防护
• 第二步：请求接口时携带令牌
  调用受保护接口时，在请求头中添加Authorization字段，值为Bearer <你的access_token>，示例：

  // fetch 调用示例
  fetch("/api/protected-route", {
    headers: {
      "Authorization": `Bearer ${localStorage.getItem("access_token")}`
    }
  })
  
  // axios 调用示例
  axios.get("/api/protected-route", {
    headers: {
      "Authorization": `Bearer ${localStorage.getItem("access_token")}`
    }
  })
  

• 第三步：前端页面级保护（可选）
  如果是单页应用，可在路由守卫逻辑中判断令牌是否存在，不存在则直接跳转到登录页，降低无效请求的触发概率：

  // Vue 路由守卫示例
  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !localStorage.getItem("access_token")) {
      next("/login")
    } else {
      next()
    }
  })
  

FastAPI后端侧校验逻辑（适配你当前的技术栈） #

FastAPI内置了OAuth2令牌校验的依赖工具，无需自己手动解析请求头，示例代码：

from fastapi import Depends, FastAPI, HTTPException
from fastapi.security import OAuth2PasswordBearer
import jwt

# 以下参数必须和你生成JWT时的配置完全一致
SECRET_KEY = "你生成JWT时使用的密钥"
ALGORITHM = "HS256" # 常用算法，按需替换为你使用的算法

app = FastAPI()
# tokenUrl参数填你项目中登录接口的路径
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/api/login")

# 受保护接口示例
@app.get("/api/user/info")
async def get_user_info(token: str = Depends(oauth2_scheme)):
    # 后端解码校验令牌合法性
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        user_id = payload.get("sub") # 一般JWT的sub字段存用户标识，按需替换为你自定义的字段
        if not user_id:
            raise HTTPException(status_code=401, detail="无效用户凭据")
    except jwt.ExpiredSignatureError:
        raise HTTPException(status_code=401, detail="令牌已过期，请重新登录")
    except jwt.InvalidTokenError:
        raise HTTPException(status_code=401, detail="无效令牌")
    # 校验通过后返回对应数据
    return {"user_id": user_id, "nickname": payload.get("nickname")}

常见注意事项 #

• 注意Authorization头的格式：Bearer和令牌字符串之间必须有1个空格，格式错误会直接导致校验失败
• JWT的payload段仅做base64编码，未加密，不要在其中存储密码、身份证号等敏感信息
• 令牌过期后需要调用刷新令牌接口（如果配置了refresh_token）或引导用户重新登录
• 前端的路由守卫仅做体验优化，真正的安全校验必须全部放在后端实现

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