第四节:Vben Admin登录对接后端getUserInfo接口

news/2024/7/10 0:49:31 标签: 前端, anti-design-vue, vue, flask

系列文章目录

第一节:Vben Admin介绍和初次运行
第二节:Vben Admin 登录逻辑梳理和对接后端准备
第三节:Vben Admin登录对接后端login接口
第四节:Vben Admin登录对接后端getUserInfo接口


文章目录

  • 系列文章目录
  • 前言
  • 一、回顾Vben Admin的登录
  • 二、getUserInfo
    • 1.定义
    • 2.查看之前Mock数据是如何模拟的
  • 三、Flask后端实现getUserInfo
  • 四、测试登录
  • 总结


前言

上一节,我们完成了/api/auth/login接口的创建,通过login接口,我们完成了登录和Token的生成。但是登陆还是报404返回,发现是Vben Admin又请求了一个/api/getUserInfo接口,本节我们就来分析完成这个接口


一、回顾Vben Admin的登录

我们完成了/api/auth/login接口后,紧接着请求了/api/getUserInfo,我们再次参考下第二节内容的分析 传送门: 第二节:Vben Admin 登录逻辑梳理和对接后端准备
在这里插入图片描述
Login接口请求后,将返回的token进行了保持,然后携带了token请求了getUserInfoAction即getUserInfo

Login.vue => LoginForm.vue => 登录按钮(handleLogin)=> userStore.login =>
loginApi => token => getUserInfo

那下一步,我们就看看Vben Admin是如何定义getUserInfo接口的

二、getUserInfo

1.定义

在这里插入图片描述
getUserInfo是一个Get请求,要求的返回结果是GetUserInfoModel,点击引用,跳转到定义:
在这里插入图片描述

2.查看之前Mock数据是如何模拟的

  {
    url: '/basic-api/getUserInfo',
    method: 'get',
    response: (request: requestParams) => {
      const token = getRequestToken(request);
      if (!token) return resultError('Invalid token');
      const checkUser = createFakeUserList().find((item) => item.token === token);
      if (!checkUser) {
        return resultError('The corresponding user information was not obtained!');
      }
      return resultSuccess(checkUser);
    },
  },

在createFakeUserList数组,里面查找到对应的用户,返回用户

export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
  return {
    code: ResultEnum.SUCCESS,
    result,
    message,
    type: 'success',
  };
}

通过上面的分析,我们后端getUserInfo已经清晰了,开始编写后端

三、Flask后端实现getUserInfo

# 获取用户信息
@bp.route('/user/info',methods=['GET','POST'])
def getUserInfo():
    token = request.headers['Authorization']
    print(token)
    print(session.get('uuid'))
    if Token.certify_token(session.get('uuid'), token):
        user = User.query.filter_by(name=session.get('username')).first()
        success_result = {
            'message': '',
            'result': {
                'roles': [
                    {'roleName': 'admin', 'value': 'super'}
                ],              
                'userId': user.uuid,
                'username': user.name,
                'realName': user.name,
                'avatar':'',
                'desc':''
            },
            'code': 0,
            'type': 'success',
        }        
        return success_result
    else:
        error_result = {
            'message': 'token鉴权失败',
            'result': {},
            'code': 401,
            'type': 'error',
        }
        return error_result

前端这里,要增加/auth 因为我的Flask注册的蓝图是/api/auth,我们的views也定义router是/user/info。
在这里插入图片描述

四、测试登录

好了,完成了getUserInfo接口,我们再次重启Vben Admin,再次尝试登录吧
在这里插入图片描述
完美!我们登录到工作台了!


总结

本节,我们完成了getUserInfo接口,完成了登录操作,成功的进入到工作台页面。


http://www.niftyadmin.cn/n/5392993.html

相关文章

五种多目标优化算法(MOCS、MOFA、NSWOA、MOAHA、MOPSO)性能对比(提供MATLAB代码)

一、5种多目标优化算法简介 多目标优化算法是用于解决具有多个目标函数的优化问题的一类算法。其求解流程通常包括以下几个步骤&#xff1a; 1. 定义问题&#xff1a;首先需要明确问题的目标函数和约束条件。多目标优化问题通常涉及多个目标函数&#xff0c;这些目标函数可能…

Nest创建神经元,并显示电压变化曲线

nest 安装与介绍 NEST&#xff08;神经模拟工具&#xff09;最初是在 1990 年代后期开发的。它的主要目标是作为计算神经科学模拟器。它支持具有不同生物学细节水平的各种神经元和突触模型。例如&#xff0c;NEST 的神经元模型范围从泄漏积分和激发模型到详细的 Hodgkin-Huxle…

寻找连续区间(C 语言)【数组区间处理】

题目来自于博主算法大师的专栏&#xff1a;最新华为OD机试C卷AB卷OJ&#xff08;CJavaJSPy&#xff09; https://blog.csdn.net/banxia_frontend/category_12225173.html 题目 给定一个含有 N 个正整数的数组&#xff0c; 求出有多少个连续区间&#xff08;包括单个正整数&am…

【大数据】Flink SQL 语法篇(四):Group 聚合

Flink SQL 语法篇&#xff08;四&#xff09;&#xff1a;Group 聚合 1.基础概念2.窗口聚合和 Group 聚合3.SQL 语义4.Group 聚合支持 Grouping sets、Rollup、Cube 1.基础概念 Group 聚合定义&#xff08;支持 Batch / Streaming 任务&#xff09;&#xff1a;Flink 也支持 G…

基于yolov5的电瓶车和自行车检测系统,可进行图像目标检测,也可进行视屏和摄像检测(pytorch框架)【python源码+UI界面+功能源码详解】

功能演示&#xff1a; 基于yolov5的电瓶车和自行车检测系统_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov5的电瓶车和自行车检测系统是在pytorch框架下实现的&#xff0c;这是一个完整的项目&#xff0c;包括代码&#xff0c;数据集&#xff0c;训练好的模型…

YOLOv8改进 | Conv篇 | 全新的SOATA轻量化下采样操作ADown(参数量下降百分之二十,附手撕结构图)

一、本文介绍 本文给大家带来的改进机制是利用2024/02/21号最新发布的YOLOv9其中提出的ADown模块来改进我们的Conv模块,其中YOLOv9针对于这个模块并没有介绍,只是在其项目文件中用到了,我将其整理出来用于我们的YOLOv8的项目,经过实验我发现该卷积模块(作为下采样模块)…

【数据结构】周末作业

1.new(struct list_head*)malloc(sizeof(struct list_head*)); if(newNULL) { printf("失败\n"); return; } new->nextprev->next; prev->nextnew; return; 2.struct list_head* pprev->next; prev->nextp->next; p->next->prevpr…

Linux——缓冲区封装系统文件操作

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、FILE二、封装系统接口实现文件操作1、text.c2、mystdio.c3、mystdio.h 一、FILE 因为IO相…