第三节：Vben Admin登录对接后端login接口

news2025/4/13 5:41:43

系列文章目录

第一节：Vben Admin介绍和初次运行
第二节：Vben Admin 登录逻辑梳理和对接后端准备

文章目录

系列文章目录
前言
一、Flask项目介绍
二、使用步骤
- 1.User模型创建
- 2.迁移模型
- 3. Token创建
- 4. 编写蓝图
- 5. 注册蓝图
三. 测试登录
总结

前言

上一节，我们梳理的Vben Admin登录功能接口的逻辑，本节开始正式开启后端的开发

一、Flask项目介绍

后端我们采用Python的Flask项目，Flask-SQLAlchemy管理数据库模型，Flask-Migrate进行模型迁移。
参考版本如下：
Flask3.0.2
Flask-SQLAlchemy3.1.1

二、使用步骤

1.User模型创建

#用户表
class User(db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    uuid = db.Column(db.String(150),unique=True,nullable=False)
    name = db.Column(db.String(50),unique=True,nullable=False)
    pwd = db.Column(db.String(255),nullable=False)
    email = db.Column(db.String(100),nullable=False)
    role_code = db.Column(db.String(100),nullable=False)
    status = db.Column(db.SmallInteger,default='1')  #状态 1：有效 0：无效

    def __repr__(self):
        return "<User %r>" % self.name

2.迁移模型

在这里插入图片描述

3. Token创建

class Token:
    @classmethod
    def generate_token(cls, key, expire=43200):
        """
        @Args:
            key: str (用户给定的key，需要用户保存以便之后验证token,每次产生token时的key 都可以是同一个key)
            expire: int(最大有效时间，单位为s)
        @Return:
            state: str
        :param key:
        :param expire:
        :return:
        """
        ts_str = str(time.time() + expire)
        ts_byte = ts_str.encode("utf-8")
        sha1_tshex_str = hmac.new(key.encode("utf-8"), ts_byte, 'sha1').hexdigest()
        token = ts_str + ':' + sha1_tshex_str
        b64_token = base64.urlsafe_b64encode(token.encode("utf-8"))

        return b64_token.decode("utf-8")

    @classmethod
    def certify_token(cls, key, token):
        """
        @Args:
            key: str
            token: str
        @Returns:
            boolean
        :param key:
        :param token:
        :return:
        """
        if key is None:
            return False
        token_str = base64.urlsafe_b64decode(token).decode('utf-8')
        token_list = token_str.split(':')
        if len(token_list) != 2:
            return False
        ts_str = token_list[0]
        if float(ts_str) < time.time():
            return False
        known_sha1_tsstr = token_list[1]
        sha1 = hmac.new(key.encode("utf-8"), ts_str.encode('utf-8'), 'sha1')
        calc_sha1_tsstr = sha1.hexdigest()
        if calc_sha1_tsstr != known_sha1_tsstr:
            # token certification failed
            return False
        # token certification success
        return True

4. 编写蓝图

代码如下（示例）：

# 登录
@bp.route('/login',methods=['GET','POST'])
def login():
    data = request.get_json()
    username = data['username']
    password = data['password']
    user = User.query.filter_by(name=data["username"]).first()
    if user is None:
        error_result = {
            'message': '用户不存在！',
            'result': {},
            'code': -1,
            'type': 'error',
        }
        return error_result
    if not user.check_password(data["password"]):
        error_result = {
            'message': '用户密码错误！',
            'result': {},
            'code': -1,
            'type': 'error',
        }
        return error_result
    else:
        token = Token.generate_token(str(user.uuid))
        session['username'] = user.name
        session['role_code'] = user.role_code
        session['uuid'] = str(user.uuid)
        success_result = {
            'message': '',
            'result': {
                'userId': user.uuid,
                'username': user.name,
                'token': token,
                'realName':''
            },
            'code': 0,
            'type': 'success',
        }
        return success_result

5. 注册蓝图

import os

from flask import Flask
from apps.config import config
from apps.exts import db
from flask_migrate import Migrate

def create_app(test_config=None):
    # create and configure the app
    app = Flask(__name__)

    app.config.from_object(config['default'])

    # ensure the instance folder exists
    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass


    from apps.api.auth import views as view_auth

    
    app.register_blueprint(view_auth.bp,url_prefix="/api/auth")

    # a simple page that says hello
    @app.route('/hello')
    def hello():
        return 'Hello, World!'

    
    db.init_app(app)
    migrate = Migrate(app, db)    

    return app

三. 测试登录

重写运行Vben Admin，再次尝试登录。
在这里插入图片描述
哎，还是404呢，经过排查，原理上次，我们前端有一个地方遗漏了，如下图，vite.config.ts指向的我们的后端地址好像不太对

这里我们改成我们后端真实数据

再次尝试登录，还是404？继续排查。。。
原来如此，我们后端注册的蓝图地址是/api/auth + /login，而前端请求地址是/api/login，我们修改下第一节介绍的src/api/sys/user.ts 里面的Api.Login地址：
在这里插入图片描述
我们再次尝试登录。

这次我们发现我们的login接口已经成功返回了，但是还是没登录上去，这里我们看到请求了login接口后，VbenAdmin马上又请求了/api/getUserInfo接口，这个接口我们还没有编写。
通过Flask的输出，也可以看到
在这里插入图片描述
看来要完成登录，我们还需要完成/api/getUserInfo接口的编写