FastAPI + Vue 实现 OAuth2 的 jwt token 登录验证

后端使用 FastAPI,前端使用 Vue 来完成登录过程的用 jwt token 实现登录验证功能。

一、后端 FastAPI

1.1 设计用户表

本文采用的是 MySQL 数据库。
首先连接 MySQL 数据库,关于 MySQL 数据库的连接可参见另外一篇文章:FastAPI 连接 MySQL

用户的数据库表如下:

class User(Base):
    __tablename__ = 'users'  # 数据库表名

    username = Column(String(255), primary_key=True, nullable=False, unique=True, index=True)
    hashed_password = Column(String(255), nullable=False)
    name = Column(String(255))
    phone = Column(String(255), nullable=False)

在数据库表中添加一条记录:

  • username:test
  • hashed_password:$2b 12 12 12EixZaYVK1fsbw1ZfbX3OXePaWxn96p36WQoeG6Lruj3vjPGga31lW
  • name:test
  • phone:11111111111

对用户的查询功能实现:

from sqlalchemy.orm import Session

def get_user(db: Session, username: str) -> mysql_po.User:
    """
    根据username获取该用户
    """
    return db.query(mysql_po.User).filter(mysql_po.User.username == username).first()

1.2 连接 Redis

首先启动 redis:命令行中输入 redis-server
在 python 中连接 redis:

async def get_redis() -> StrictRedis:
    """
    获取Redis对象
    """
    redis = StrictRedis(host=redis_conf.HOST,
                        port=redis_conf.PORT,
                        db=redis_conf.db,
                        password=redis_conf.PASSWORD)
    try:
        yield redis
    finally:
        redis.close()

1.3 实现验证类

采用 FastAPI 自带的 OAuth 实现即可:

from fastapi.security import OAuth2PasswordBearer
from pydantic import BaseSettings
from sqlalchemy.orm import Session
from passlib.context import CryptContext
from datetime import datetime, timedelta
from jose import jwt

class UserTokenConfig(BaseSettings):
    """对用户登录时处理token的相关配置"""
    SECRET_KEY: str = "09d25e094faa6ca2556c818166b7a9563b93f7099f6f0f4caa6cf63b88e8d3e7"  # 通过命令行 `openssl rand -hex 32` 可以生成该安全密钥
    ALGORITHM: str = "HS256"
    ACCESS_TOKEN_EXPIRE_MINUTES: int = 30

user_token_conf = UserTokenConfig()

__oauth2_scheme = OAuth2PasswordBearer(tokenUrl="api/login/token")
pwd_context = CryptContext(schemes=['bcrypt'], deprecated='auto')

def get_pwd_hash(pwd):
    return pwd_context.hash(pwd)

def authenticate_user(mysql_db: Session, username: str, password: str) -> Union[bool, mysql_po.User]:
    """
    验证用户合法性
    :return: 若验证成功则返回 User 对象;若验证失败则返回 False
    """
    user = get_user(mysql_db, username)
    if not user:
        return False
    if not pwd_context.verify(password, user.hashed_password):
        return False
    return user

def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
    to_encode = data.copy()
    if expires_delta:
        expire = datetime.utcnow() + expires_delta
    else:
        expire = datetime.utcnow() + timedelta(minutes=15)
    to_encode.update({"exp": expire})
    encoded_jwt = jwt.encode(to_encode, user_token_conf.SECRET_KEY, algorithm=user_token_conf.ALGORITHM)
    return encoded_jwt


async def fetch_token(request: Request) -> Optional[str]:
    """
    在 request 中获取到 oauth2 认证所需要的信息
    :return: 取出的 token
    """
    try:
        token = await __oauth2_scheme(request)
    except HTTPException as e:
        raise TokenVerifyException(e.detail)
    return token


def verify_token(token: str = Depends(fetch_token),
                 redis: StrictRedis = Depends(get_redis)) -> str:
    """
    根据请求头部的 Authorization 字段,在 Redis 进行验证并获取用户的 username
    :return: 验证成功时返回用户的 username,验证失败则抛出异常
    :raise: TokenVerifyException 验证失败时抛出此异常
    """
    # 验证 token 是否为空
    if token is None:
        raise TokenVerifyException()
    # 查询 redis_db 进行验证
    username = redis.get(token)
    if username is None:
        raise TokenVerifyException()
    return username
  • TokenVerifyException 为自定义异常。

1.4 controller 实现

from fastapi import APIRouter, Depends, HTTPException, status,
from redis import StrictRedis
from sqlalchemy.orm import Session

router = APIRouter()

class Token(BaseModel):
    code: int = 0
    access_token: str = Field(description='本次登录的token')
    token_type: str = Field(default='Bearer', description='token的类型,统一为 Bearer')

@router.post("/token",
                   response_model=Token,
                   summary='登录接口,获取 token',
                   description="""采用OAuth2.0认证协议,登录时获取用户的token,
                                使用 x-www-form-urlencoded 格式, 
                                在 Request Body 提交 username 和 password 即可获得本次用户登录的token,
                                并会被缓存到 Redis 中保持一定的时间段""")
async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends(),
                                 mysql_db: Session = Depends(get_mysql_db),
                                 redis_db: StrictRedis = Depends(get_redis)):
    user = authenticate_user(mysql_db, form_data.username, form_data.password)  # 查询数据库进行用户验证
    if not user:
        raise HTTPException(
            status_code=status.HTTP_401_UNAUTHORIZED,
            detail="Incorrect username or password",
            headers={"WWW-Authenticate": "Bearer"},
        )
    # 根据 username 生成 token
    access_token_expires = timedelta(minutes=user_token_conf.ACCESS_TOKEN_EXPIRE_MINUTES)
    access_token = create_access_token(
        data={"sub": user.username}, expires_delta=access_token_expires
    )

    redis_db.set(access_token, user.username, ex=user_token_conf.ACCESS_TOKEN_EXPIRE_MINUTES * 60)  # 设置 redis_db 缓存

    return Token(
        code=0,
        access_token=access_token,
        token_type='Bearer'
    )

1.5 测试

运行 FastAPI 后进入 /docs 页面,会看到上面有一个 Authorize 用来测试认证过程:
FastAPI + Vue 实现 OAuth2 的 jwt token 登录验证_第1张图片
输入用户名 test、密码 secret 后发现可以认证成功。

二、前端 Vue

2.1 添加拦截器

在 main.ts 中添加如下 axios 的拦截器:

axios.defaults.baseURL = process.env.VUE_APP_SERVER;  // 在使用 axios 发送请求时全局的base域
axios.defaults.headers.common['Authorization'] = "Bearer " + store.state.localUser.access_token;


// 添加请求拦截器
axios.interceptors.request.use(function(config: any) {
    config.headers.Authorization = "Bearer " + store.state.localUser.access_token;
    console.info(config);
    return config;
}, function(error: any) {
    return Promise.reject(error);
});

2.2 引入 vuex

按照官网安装 vuex 后,在 store/index.ts 中使用 vuex:

import { createStore } from 'vuex'

declare let SessionStorage: any;
const USER = 'USER';

const store = createStore({
  state: {
    localUser: SessionStorage.get(USER) || {}  // 表示当前登录的用户
  },
  mutations: {
    setLocalUser(state, user) {
      state.localUser = user;
      SessionStorage.set(USER, user);  // 将该用户的信息存放于 SessionStorage 中
    }
  },
  actions: {
  },
  modules: {
  }
})


export default store;

2.3 加入登录页面

以 antdv 为例:

<a-modal
        title="登录"
        v-model:visible="loginModalVisible"
        :confirm-loading="loginModalLoading"
        @ok="login"
    >
      <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="登录名">
          <a-input v-model:value="loginUser.loginName" />
        a-form-item>
        <a-form-item label="密码">
          <a-input v-model:value="loginUser.password" type="password" />
        a-form-item>
      a-form>
a-modal>

脚本处编写函数:

<script lang="ts">
import {computed, defineComponent, ref} from "vue";
import axios from 'axios';
import store from "@/store";
import qs from 'qs';


export default defineComponent({
  name: 'the-header',
  setup () {
    // 登录后保存
    const currUser = computed(() => store.state.localUser);

    // 用来登录
    const loginUser = ref({
      loginName: "test",
      password: "test",
    });
    const loginModalVisible = ref(false);
    const loginModalLoading = ref(false);
    const showLoginModal = () => {
      loginModalVisible.value = true;
    };

    // 登录
    const login = () => {
      console.log("开始登录");
      loginModalLoading.value = true;
      axios.post('/api/login/token', qs.stringify({username: loginUser.value.loginName,
                                                  password: loginUser.value.password}), 
                                                  {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response) => {
        loginModalLoading.value = false;
        const respData = response.data;
        const user = {
          'access_token': respData.access_token,
          'name': '',
          'id': ''
        }
        if (respData.code === 0) {
          loginModalVisible.value = false;
          user.id = loginUser.value.loginName;
          user.name = respData.student_name;
          store.commit("setLocalUser", user);
          message.success("登录成功!");
        } else {
          message.error(respData.msg);
        }
      });
    };
	return {
      loginModalVisible,
      loginModalLoading,
      showLoginModal,
      loginUser,
      login,
      currUser,
    }
}

由此便可打通前后端并实现 jwt token 的认证。

你可能感兴趣的:(Python,趟过的坑,数据库,redis,mysql,fastapi)