当前位置: 首页 > news >正文

【图文并茂】ant design pro 如何对接后端个人信息接口

在这里插入图片描述

上一节我们有讲到如何对接登录接口的 【图文并茂】ant design pro 如何对接登录接口

仅仅能登录是最基本的,但是我们要进入后台还是需要另一个接口。

这个接口有两个作用:

  1. 来获取当前登录账号的信息,比如头像,用户名,还有一些权限信息等
  2. 来验证一下后台是否登录过

关于第二点,是很重要的,这个接口就是必须你要登录过一次,拿到 token 之后,才能访问到。

如果你没有 token ,也就是说没有登录过,这个接口访问的时候就会出问题,比如你都没登录过,你觉得能拿到个人信息吗,拿谁的。所以没有登录过的,就让它跳到登录页面,就是这个接口的作用。

有没有登录过,就只看浏览器有没有存好 token.

在这里插入图片描述

实现好后端

const getUserProfile = handleAsync(async (req: RequestCustom, res: Response) => {// 确保在请求处理流程中间件中已经添加了解析 JWT 并设置 req.userconst user: IUser | null = await User.findById(req.user?._id).populate('roles') // 预加载 roles 字段.exec();if (user) {// 再次预加载 permissions 字段,因为 roles 已经被预加载await user.populate('roles.permissions');res.json({success: true,data: {...exclude(user.toObject(), 'password'),avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',},});} else {res.status(404);throw new Error('User not found');}
});

后端只是把 req.user 的信息拿到并返回给前端罢了。

比如这样的信息:

在这里插入图片描述
那么这个 req.user 是啥

我们看下路由

在这里插入图片描述
前面有个 protect 中间件,这个可以拿到 req.user

它的逻辑是这样的:

const protect = handleAsync(async (req: RequestCustom, res: Response, next: NextFunction) => {let token;if (req.headers.authorization &&req.headers.authorization.startsWith('Bearer')) {try {token = req.headers.authorization.split(' ')[1];const decoded = jwt.verify(token,process.env.JWT_SECRET as string,) as jwt.JwtPayload;const user: IUser | null = await User.findById(decoded.id).populate({path: 'roles',populate: {path: 'permissions',model: 'Permission',},}).exec();if (!user || !user.live) {throw new Error('User is not live or not found');}req.user = user;console.log('User is', user);next();} catch (error) {console.error(error);res.status(401).send({ message: error.message || 'Not authorized, token failed' });}}if (!token) {res.status(401).send({ message: 'Not authorized, no token' });}},
);

主要是这里:

req.headers.authorization &&
req.headers.authorization.startsWith(‘Bearer’)

这个地方是从前端拿到头信息。

在这里插入图片描述
下一步就是通过 json web token 的库去解析这个字符串 token 。

    token = req.headers.authorization.split(' ')[1];const decoded = jwt.verify(token,process.env.JWT_SECRET as string,) as jwt.JwtPayload;

拿到里面的 id 再去数据库把当前用户找出来,最后放到 req.user 中。

所以后面的 action 就可以拿到 req.user. 因为 protect 这里已经拿到并存到 req 了。

如果找不到

if (!token) {res.status(401).send({ message: 'Not authorized, no token' });
}

就会给前端一个 401 状态码。前端拿到 401 状态码,就会跳出到登录页面。

process.env.JWT_SECRET 上面有个密钥,这是服务器存的,不能暴露出去,就像你家的钥匙一样。

所以我们这个 token 是安全,就算别人伪造了信息,他没有你的 key ,后面也是解析不了,能判断是不是假的数据。

其实最上面 getUserProfile 里的

const user: IUser | null = await User.findById(req.user?._id)
.populate(‘roles’) // 预加载 roles 字段
.exec();

并不是必要的,因为 req.user 应该有 user 的对象记录信息了。当然再查一遍也是没问题。

前端实现

主要是还是在这里:

src/app.tsx

export async function getInitialState(): Promise<{settings?: Partial<LayoutSettings>;currentUser?: API.CurrentUser;loading?: boolean;fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {const fetchUserInfo = async () => {try {const response = await queryCurrentUser({skipErrorHandler: true,});return response.data;} catch (error) {history.push(loginPath);}return undefined;};// 如果不是登录页面,执行const { location } = history;if (location.pathname !== loginPath) {const currentUser = await fetchUserInfo();return {fetchUserInfo,currentUser,settings: defaultSettings as Partial<LayoutSettings>,};}return {fetchUserInfo,settings: defaultSettings as Partial<LayoutSettings>,};
}

还是跟以前一样,要对接好请求地址,方法,参数

queryCurrentUser

这个逻辑是这样的:

export async function currentUser(options?: { [key: string]: any }) {return request<API.CurrentUser>('/auth/profile', {method: 'GET',...(options || {}),});
}

用的是 get 方法,地址要对。

后面是这个

  const response = await queryCurrentUser({skipErrorHandler: true,});return response.data;

响应的数据要对上

跟这里的数据结构是要对上的API.CurrentUser

  type CurrentUser = {isAdmin: CurrentUser | undefined;data?: any;name?: string;avatar?: string;role?: string;roles?: any;_id?: string;userid?: string;email?: string;signature?: string;title?: string;group?: string;tags?: { key?: string; label?: string }[];notifyCount?: number;unreadCount?: number;country?: string;access?: string;geographic?: {province?: { label?: string; key?: string };city?: { label?: string; key?: string };};address?: string;phone?: string;};

也就是这里的

在这里插入图片描述
这里可能还差一个东西,我们要把 token 提交过去。

我们下一节来讲

  • ant design pro 如何去保存颜色
  • ant design pro v6 如何做好角色管理
  • ant design 的 tree 如何作为角色中的权限选择之一
  • ant design 的 tree 如何作为角色中的权限选择之二
  • ant design pro access.ts 是如何控制多角色的权限的
  • ant design pro 中用户的表单如何控制多个角色
  • ant design pro 如何实现动态菜单带上 icon 的
  • ant design pro 的表分层级如何处理
  • ant design pro 如何处理权限管理
  • ant design pro 技巧之自制复制到剪贴板组件
  • ant design pro 技巧之实现列表页多标签
  • 【图文并茂】ant design pro 如何对接登录接口

相关文章:

【图文并茂】ant design pro 如何对接后端个人信息接口

上一节我们有讲到如何对接登录接口的 【图文并茂】ant design pro 如何对接登录接口 仅仅能登录是最基本的&#xff0c;但是我们要进入后台还是需要另一个接口。 这个接口有两个作用&#xff1a; 来获取当前登录账号的信息&#xff0c;比如头像&#xff0c;用户名&#xff0…...

MySQL运维学习(1):4种日志

1.错误日志 mysql错误日志记录了mysql发生任何严重错误时的信息&#xff0c;若数据库无法正常使用时&#xff0c;可以先查看错误日志 默认情况下错误日志是开启的&#xff0c;文件名为/var/log/mysqld.log&#xff0c;如果文件不在默认位置&#xff0c;可以通过下面的命令查看…...

代码随想录算法训练营第二十天(二叉树 七)

day19 周日放假 今天依旧是二叉树环节 力扣题部分: 235. 二叉搜索树的最近公共祖先 题目链接:. - 力扣&#xff08;LeetCode&#xff09; 题面: 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T …...

Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发

&#x1f31f; Django 后端架构开发&#xff1a;通用表单视图、组件对接、验证机制和组件开发 &#x1f539; django 通用表单视图 Django 的通用表单视图提供了快速创建和处理表单的功能&#xff0c;使得表单处理变得简洁而高效。以下示例展示了如何使用通用表单视图创建一个…...

Cookie和Session是什么?它们的区别是什么?

【知识】深入理解COOKIE&SESSION的原理和区别-腾讯云开发者社区-腾讯云 (tencent.com) Cookie和Session的区别&#xff08;面试必备&#xff09;_cookie和session的作用和区别-CSDN博客 Cookie和Session是什么&#xff1f;它们的区别是什么&#xff1f;_cookie里面的字符…...

Python正则表达式提取车牌号

在Python中使用正则表达式&#xff08;Regular Expressions&#xff09;来提取车牌号是一个常见的任务&#xff0c;尤其是在处理车辆信息或进行图像识别后的文本处理时。中国的车牌号格式多种多样&#xff0c;但通常包含省份简称、英文字母和数字。以下是一个使用Python正则表达…...

视觉引导机械臂学习记录

首先是几个位置&#xff0c;拍照位、示教位、目标位置。 流程主要是 1.首先选取一个拍照位&#xff0c;相机扫描点云&#xff0c;通过点云质量进行选取。并且制作点云模板&#xff0c;进行配准&#xff0c;如果配准分数高则模板选取正确。 2.用相机拍灰度图像&#xff0c;并…...

插屏广告在游戏APP中广告变现的独特优势

插屏广告是目前全球移动应用变现的主要广告形式之一&#xff0c;其优势在于可以快速收回成本&#xff0c;又能适应于多数缺乏激励场景的应用。 插屏广告通常在app使用过程中的自然过渡点&#xff0c;比如暂停场景切换的时候弹出&#xff0c;以图片、动图、视频等为表现形式的半…...

Python数据分析:数据可视化(Matplotlib、Seaborn)

数据可视化是数据分析中不可或缺的一部分&#xff0c;通过将数据以图形的方式展示出来&#xff0c;可以更直观地理解数据的分布和趋势。在Python中&#xff0c;Matplotlib和Seaborn是两个非常流行和强大的数据可视化库。本文将详细介绍这两个库的使用方法&#xff0c;并附上一个…...

Java CompletableFuture:你真的了解它吗?

文章目录 1 什么是 CompletableFuture&#xff1f;2 如何正确使用 CompletableFuture 对象&#xff1f;3 如何结合回调函数处理异步任务结果&#xff1f;4 如何组合并处理多个 CompletableFuture&#xff1f; 1 什么是 CompletableFuture&#xff1f; CompletableFuture 是 Ja…...

5个免费在线 AI 绘画网站推荐,附100+提示词!

在数字化时代&#xff0c;艺术创作与人工智能的结合已带来前所未有的创新体验。AI 绘画技术&#xff0c;基于先进的人工智能算法&#xff0c;为艺术创作提供了全新的视角和工具。当前&#xff0c;多个免费在线AI绘画平台应运而生&#xff0c;为创作者们提供了丰富的灵感和创作机…...

C++基础语法:while的使用

前言 "打牢基础,万事不愁" .C的基础语法的学习."学以致用,边学边用",编程是实践性很强的技术,在运用中理解,总结. 引入 while的使用是编写代码的基础内容.笔者的记忆力已不如以前,最近遇到了还花了不少功夫,可见是掌握地不够牢固.所以对while的思路和内容…...

鹏哥C语言自定义笔记重点(29-)

29.函数指针数组 30.void指针是不能直接解引用&#xff0c;也不能-整数。 void*是无具体类型的指针&#xff0c;可以接受任何类型的地址。 31.qsort:使用快速排序的思想实现一个排序函数(升序) 32. 33.地址的字节是4/8 34.char arr[]{a,b} sizeof(arr[0]1)答案是4&#xff0…...

代码随想录算法训练营第六十天 | dijkstra(堆优化版)、Bellman_ford 算法精讲

一、dijkstra&#xff08;堆优化版&#xff09; 题目连接&#xff1a;47. 参加科学大会&#xff08;第六期模拟笔试&#xff09; (kamacoder.com) 文章讲解&#xff1a;代码随想录 (programmercarl.com)——dijkstra&#xff08;堆优化版&#xff09; 二、Bellman_ford 算法精讲…...

boost::asio 库版本,C/C++代码编译兼容性

1、boost::asio::spawn 开启有栈&#xff08;stackful&#xff09;协同程序&#xff0c;版本改进及限制 > boost_1_80 版本应采用以下方式。 auto f [self, this](const boost::asio::yield_context& y) noexcept {bool success_ do_handshake(y);if (!success_) {clo…...

前端开发的项目导入方法与应用

前端项目启动问题归集&#xff1a; 由于前端的项目对于npm的版本有要求&#xff0c;需要将其升级到20&#xff0c;所以必要的时候通过nvm&#xff0c;或者直接下载最新的安装包进行npm覆盖安装。在项目目录中应用npm i安装node_modules&#xff0c;如果没有正常安装的话&#…...

C++:模拟实现string

前言&#xff1a; 为了更好的理解string底层的原理&#xff0c;我们将模拟实现string类中常用的函数接口。为了与std里的string进行区分&#xff0c;所以用命名空间来封装一个自己的strin类。 string.h #pragma once #define _CRT_SECURE_NO_WARNINGS 1#include<iostream&…...

浅谈Kafka(一)

浅谈Kafka&#xff08;一&#xff09; 文章目录 浅谈Kafka&#xff08;一&#xff09;Kafa的设计是什么样的数据传输的事务定义消息队列的应用场景Kafka怎么样判断节点是否存活Kafka的消息是采用pull模式还是push模式Kafka在磁盘上的消息格式Kafka高效文件存储设计特点Kafka与传…...

Redis7基础篇(八)

redis集群 是什么 能干吗 集群算法-分片-槽位slot redis集群的槽位slot redis集群的分片 分片和槽位的优势 槽位映射的解决方案 上面的三个方案分别对应了小厂 中厂 大厂 哈希槽取余分区 缺点 一致性哈希算法分区 小总结 哈希槽分区 经典面试题 这里说的redis是ap而不是cp的 …...

Tauri简介

在Tauri应用中&#xff0c;Rust和前端&#xff08;通常是基于Web技术如React、Vue或Angular&#xff09;之间的交互是一个核心特性&#xff0c;它允许开发者利用Rust的强大功能和性能&#xff0c;同时保持前端开发的灵活性和丰富的生态系统。这种交互主要通过Tauri提供的API桥接…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...