FastAPI OAuth2实现用户验证

from typing import Annotated

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

app = FastAPI()

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")


@app.get("/items/")
async def read_items(token: Annotated[str, Depends(oauth2_scheme)]):
    return {"token": token}

1. 导入必要的库：您导入了 FastAPI、OAuth2PasswordBearer 和 Annotated，这些都是构建 FastAPI 应用和实现 OAuth2 认证所必需的。
2. 创建 FastAPI 应用实例：app = FastAPI() 创建了一个 FastAPI 应用实例。
3. 配置 OAuth2 认证：oauth2_scheme = OAuth2PasswordBearer(tokenUrl=“token”) 定义了一个 OAuth2 认证方案，其中 tokenUrl=“token” 指定了获取令牌的 URL。
4. 定义路由和依赖：@app.get(“/items/”) 定义了一个 GET 请求路由。async def read_items(token: Annotated[str, Depends(oauth2_scheme)]): 定义了该路由的处理函数，它依赖于 OAuth2 认证。这意味着在访问 /items/ 路径时，用户需要提供一个有效的令牌。
5. 返回令牌：return {“token”: token} 函数返回了一个包含访问令牌的 JSON 响应。

• 当您在 FastAPI 应用中使用 OAuth2PasswordBearer 时，您实际上是在定义一个安全方案，该方案将处理令牌的接收和验证。这里的 tokenUrl=“token” 参数指定了客户端获取令牌的端点 URL。这个 URL 是客户端发送用户名和密码的地方，以获取访问令牌。
• 当您在路由处理函数中添加 token: Annotated[str, Depends(oauth2_scheme)] 作为参数时，您是在告诉 FastAPI：
  • 此路由需要 OAuth2 认证。
  • 客户端需要在 Authorization 头部中提供访问令牌。(通过请求拦截器发送token)
  • 令牌的获取 URL 是 /token。

基本验证流程

1. 通过浏览器输入用户名和密码，把请求提前到oauth2_scheme = OAuth2PasswordBearer(tokenUrl=“token”) 中指定的tokenUrl： “token",

• 提交的username 和 password 必须为FormData格式，不能是json格式

        const formData = new FormData
        formData.append('username', loginForm.username);
        formData.append('password', loginForm.password);
        await useStore.userLogin(formData);

• 在前端的请求拦截器当中，必须在请求头信息中加入config.headers.Authorization = Bearer ${userStore.token}
  否则验证不通过。

//第二步：request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
  // 获取用户相关的小仓库：获取仓库内部token,登录成功后携带给服务器
  const userStore = useUserStore()
  if (userStore.token) {
    console.log(userStore.token);
    config.headers.token = userStore.token
    // Add the Authorization header with the Bearer token
    config.headers.Authorization = `Bearer ${userStore.token}`
  }
  //config配置对象，headers属性请求头，经常给服务器携带公共参数
  //返回配置对象
  return config
})