❤Node11-登录人token信息接口

news2024/11/15 23:30:39

❤Node11-登录人token信息接口​

上一章我们已经从登录部分拿到了用户的登录jwt返回的token信息,接下来我们就通过token来换取用户信息 这里我们可以将其理解为一种加密以及解密的思想来思考这个jwt和token的关系,token就是一个加密的字符串,而jwt就是那把钥匙。

1、解析 JWT字符串 还原为JSON对象​

客户端每次在访问那些有权限接口的时候,都需要主动通过请求头中的 **Authorization** 字段,将 Token 字符串发送到服务器进行身份认证。 此时,服务器可以通过 express-jwt这个中间件,自动将客户端发送过来的 Token 解析还原成 JSON 对象: token解析如下:

app.use(
  expressJWT.expressjwt({ secret: secretKey, algorithms: ["HS256"] }).unless({
    // path: [/^\/api\//],
    path: [
            '/',
            '/api/login',
            '/api/register',
            '/api/resetPwd'
     ]
  })
);

image.png

这个时候我们请求的接口里面携带一下刚刚的token然后访问一下试试

js

   axios({
        method: 'get',
        url: api,
        headers: {
            'Authorization': 'Bearer '+localStorage.getItem("login"),
            'Content-Type': 'application/json;charset=utf-8',
            'Custom-Header': 'custom-value'
        },
        params: params,
    })
    .then(res => {
        console.log(res.data);
        if (res.status == 200) {
            // console.log(res, 'res');
            tableData.value = res.data.data;
            totalvalue.value = res.data.total;
        }
    })
    .catch(error => {
        console.error(error);
    });

可以看到,这个时候我们的接口请求参数已经完全没问题了!

image.png

2、 获取用户信息(接口)​

当 express-jwt 这个中间件配置成功之后,即可在那些有权限的接口中,使用 req.user 对象,来访问从 JWT 字符串中解析出来的用户信息了,示例代码如下:

js

  // 这是一个有权限的api接口
app.get('/api/getInfo', (req, res) => {
    console.log(req.user);
    res.send({
        status: 200,
        message: 'success',
        data: req.user,
    })
})

从上面我们注册时候的接口可以看到,我们当时候注册了一个用户的username

image.png

返回的信息如下:

image.png

js

  req.auth信息如下:
{ username: 'admin', iat: 1713773255, exp: 1713780455 }

返回的信息内容如下:

js

  -   `username: 'admin'`: 这是 JWT 中存储的用户名信息,指示该令牌是以管理员身份签发的或者与管理员相关联的。
-   `iat: 1713773255`: 这是 JWT 的 "issued at"(签发时间)字段,表示 JWT 的签发时间。它是一个 Unix 时间戳,表示从 1970 年 1 月 1 日 00:00:00 UTC 到签发 JWT 的时间经过的秒数。
-   `exp: 1713780455`: 这是 JWT 的 "expiration time"(过期时间)字段,表示 JWT 的过期时间。也是一个 Unix 时间戳,表示 JWT 过期的时间点。在这个时间点之后,JWT 将不再被认为是有效的,需要重新获取新的 JWT。

从这个返回信息的签发时间,我们可以思考一下可以起到什么样的用途呢:

3、查询我们数据用户信息​

通过我们的用户接口返回的username参数去查询我们数据用户信息

js

  app.get('/api/getInfo', (req, res) => {
    // 查询用户详情接口 
    const values=[req.auth.username];
    let query = 'SELECT * FROM user WHERE username = ?';
    connectionpool.query(query, values, (err, results) => {
        if (err) {
            console.error('Error querying database:', err);
            res.status(500).json({ error: '用户不存在!' });
            return;
        }else{
          res.json({
              code: '200',
              data: results,
          });
        }
    });
})

最后我们查到的数据库信息如下: 可以看到我们查出来的其实是一个数组,这个时候我们可以优化一下,当查询出来的数据是空数据的时候,默认给个赋值,当含有数据的时候,拿数组的第一项数据 优化结果

js

  data: results?.length>0? results[0] : {},

image.png

4、测试使用用户信息接口​

接下来我们找个网页利用axios(自己把token给放进去哦记得!)尝试请求一下看是否可以获取对应的用户信息

js

  // 获取用户信息
function getUserinfo() {
    let api = "http://localhost:8888/api/getInfo";
    axios({
        method: 'get',
        url: api,
        headers: {
            'Authorization': 'Bearer '+localStorage.getItem("login"),
            'Content-Type': 'application/json;charset=utf-8',
            'Custom-Header': 'custom-value'
        },
    })
    .then(res => {
        console.log(res.data);
        if (res.status == 200) {
            console.log(res, 'res-获取用户信息');
        }
    })
    .catch(error => {
        console.error(error);
    });

}

在我们自己封装的项目之中进行封装一下

js

  // 获取用户信息
export function getInfo () {
  return request({
    url: '/api/getInfo',
    method: 'get',
  })
}


import React,{ useEffect } from "react";
import { getInfo } from '@/api/common/comon';


// 获取用户信息
const getUserInfo = () => {
    console.log('获取用户信息');
    getInfo().then(res => {
        console.log(res,'获取用户信息');
        setUserinfo(res.data);
    })
}

 useEffect(() => {
        console.log('useEffect-home');
        getUserInfo();
},[])

image.png

查询没问题,可以获取用户的信息!

5、优化用户信息接口​

👍 time(2024-8-10) 优化提示信息​

之前我们简单实现了我们的用户信息接口,但是在使用token换取信息的过程之中,很多次都是直接500,但是找不到其中的原因 接下来我们完善优化一下我们的用户信息接口

  • 授权信息提示的完善

js

  if (!req.auth || !req.auth.username) {
    return res.status(401).send({
        code: 401,
        message: '未认证用户或缺少用户名!',
    });
}
  • 优化一下信息提示部分

js

  if (err) {
    console.error('Error querying database:', err);
    return res.status(500).send({
        code: 500,
        message: '数据库查询错误!',
    });
}

if (results.length === 0) {
    return res.status(404).send({
        code: 404,
        message: '用户不存在!',
    });
}

res.send({
    code: 200,
    data: results[0],
    message: '欢迎你的访问!',
});

👍 time(2024-8-14)处理问题​

今天访问接口,一直提示我这个问题

js

  {code: 500, message: "服务器错误!"}

然后我找了一遍可能是链接过程的问题,之前我们对于接口500的时候进行了一个拦截,我们打印出来看看

js

  // 接口错误的封装---拦截部分
app.use((err, req, res, next) => {
  // 如果错误是由token解析失败导致的
  if (err.name === 'UnauthorizedError') {
    return res.send({
      code: 401,
      message: '登录过期,请重新登录!'
    })
  }
  console.log('其他原因导致的错误!',err);
  // 如果是其他位置原因导致的错误
  res.send({
    code: 500,
    message: '服务器错误!'
  })
  next()
})

输出以后我们能看到消息,这里我的报错部分是这样子的:

js

查询语句 SELECT * FROM user WHERE username = ?
其他原因导致的错误! ReferenceError: connectionpool is not defined

原来是我们项目大小写的原因,这里我们改一下,因为之前我们拆分模块的时候,把所有的 connectionpool=> connectionPool ,更改为了小驼峰命名,所以,这里出现问题,建议大家还是细心啊!

image.png

再次查询,这里问题已经处理好了!

image.png

👍 优化返回信息接口user​

之前我们直接返回的data信息,这里我们返回来的部分更改为user用户信息

js

res.send({
    code: 200,
    data: results[0],
    message: '欢迎你的访问!',
});

=> 更改为

res.send({
    code: 200,
    user: results[0],
    message: '欢迎你的访问!',
});

报错​

expressJWT is not a function(expressJWT版本语法)​

导入和使用expressJWT时遇到问题

c

import expressJWT  from 'express-jwt' 
app.use(expressJWT({ secret: secretKey }).unless({ path: ['/login'] }))

image.png

原因 由于express-jwt 版本的更新,之前的语法不适用于现在的 新版本 ,可以看到现在 是 8 开头的版本 express-jwt8的版本如下图所示:

javascript

 app.use(
  expressJWT.expressjwt({ secret: secretKey, algorithms: ["HS256"] }).unless({
    // path: [/^\/api\//],
    path: [
            '/',
            '/api/login',
            '/api/register',
            '/api/resetPwd'
     ]
  })
);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2160233.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JavaEE】——内存可见性问题

阿华代码,不是逆风,就是我疯,你们的点赞收藏是我前进最大的动力!!希望本文内容能够帮助到你! 目录 一:内存可见性问题 1:代码解释 2:结果分析 (1&#xf…

《现代畜牧兽医》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问:《现代畜牧兽医》是不是核心期刊? 答:不是,是知网收录的第一批认定 学术期刊。 问:《现代畜牧兽医》级别? 答:省级。主管单位:辽宁省科学技术协会 …

vue2实现提取字符串数字并修改数字样式(正则表达式)

如果你要在循环中提取 item.companyName 中的数字&#xff0c;并且希望为这些数字改变颜色和边距&#xff0c;可以对每个 item 进行处理。此处是一个实现示例&#xff1a; <template> <div> <div class"box" v-for"(item, index) in coldBase…

学校气膜体育馆:低成本、高效率的灵活运动空间—轻空间

在当前教育设施的升级中&#xff0c;传统体育馆的建设往往面临长时间、高成本、以及繁琐的审批流程等诸多挑战。然而&#xff0c;学校无需再为这些问题烦恼&#xff0c;只需选择气膜结构的体育馆&#xff0c;就能快速、高效地解决体育场地需求。气膜体育馆凭借其灵活的设计和高…

Java项目实战II基于SSM的国外摇滚乐队交流和周边售卖系统的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者 一、前言 随着互联网技术的飞速发展&#xff0c;信息传播的广度和深度不断拓展&#xff0c;为各行业的创新发展…

二分查找算法(4) _搜索插入位置

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 二分查找算法(4) _搜索插入位置 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 …

太爱这5本书了,建议所有大模型人去翻烂它❗

要说现在最热门的技术&#xff0c;可谓非大模型莫属&#xff01; 不少小伙伴都想要学习大模型技术&#xff0c;转战AI领域&#xff0c;以适应未来的大趋势&#xff0c;寻求更有前景的发展~~ 然而&#xff0c;在学习大模型技术这条道路上&#xff0c;却不知道如何进行系统的学…

无人机飞手培训校企合作特训技术详解

随着无人机技术的飞速发展&#xff0c;其在航拍、农业、测绘、救援等多个领域的应用日益广泛&#xff0c;市场对高素质无人机飞手的需求急剧增加。为满足这一需求&#xff0c;促进教育与产业深度融合&#xff0c;无人机飞手培训校企合作模式应运而生。本文将从确定合作目标、共…

可视化大屏看阿里,阿里出品,必属精品。

阿里云有自己的可视化平台——dataV&#xff0c;经常会出一些高颜值、强交互的大屏&#xff0c;本期为大家分享一波。

HTML、CSS

初识web前端 web标准 Web标准也称为网页标准&#xff0c;由一系列的标准组成&#xff0c;大部分由W3C (World Wide Web Consortium&#xff0c;万维网联盟) 负责制定。三个组成部分: HTML: 负责网页的结构(页面元素和内容)。CSS: 负责网页的表现(页面元素的外观、位置等页面样…

Tableau|一入门

一 什么是BI工具 BI 工具即商业智能&#xff08;Business Intelligence&#xff09;工具&#xff0c;是一种用于收集、整理、分析和展示企业数据的软件系统&#xff0c;其主要目的是帮助企业用户更好地理解和利用数据&#xff0c;以支持决策制定。 主要功能&#xff1a; 1.数据…

Vue3使用通信组件库mitt作为事件总线实现跨组件通信

mitt 介绍: Mitt 是一个在 Vue.js 应用程序中使用的小型事件总线库。该库允许组件进行通信&#xff0c;而不必过度依赖父级或子级组件之间的 props。 先看项目用例&#xff1a; 【 以下转载自&#xff1a;https://blog.csdn.net/yuanlong12178/article/details/139579299 】…

虚拟机安装xubuntu

新建一个新的虚拟机&#xff0c;选择自定义安装 默认下一步 选择稍后安装操作系统 选择所要创建的系统及版本 填写虚拟机的名称及创建的虚拟机保存的位置 选择处理器和内核的数量 处理器数量指的是&#xff1a;虚拟的CPU数量。 每个处理器的内核数量指的是&#xff1a;虚拟CPU…

Ubuntu 24.04.1 LTS 安装 node 16.20.2环境

目录 step1&#xff1a;确认版本 step2&#xff1a;选择方式 step3&#xff1a;二进制文件安装 step1&#xff1a;确认版本 不同的版本情况可能有稍许不同&#xff0c;尽可能环境安装前版本保持一致&#xff1b; lsb_release -a 或者 cat /etc/os-release 可以查看版本信…

【机器学习】---元强化学习

目录 1. 元学习简介1.1 什么是元学习&#xff1f;1.2 元学习的应用 2. 强化学习基础2.1 什么是强化学习&#xff1f;2.2 强化学习的基本框架2.3 深度强化学习 3. 元强化学习的概念与工作原理3.1 元强化学习是什么&#xff1f;3.2 元强化学习与普通强化学习的区别 4. 元强化学习…

Arthas ognl(执行ognl表达式)

文章目录 二、命令列表2.1 jvm相关命令2.1.12 ognl&#xff08;执行ognl表达式&#xff09;举例1&#xff1a;获取静态属性举例2&#xff1a;调用静态方法 二、命令列表 2.1 jvm相关命令 2.1.12 ognl&#xff08;执行ognl表达式&#xff09; 使用场景&#xff1a; Arthas 的 …

【Vue系列五】—Vue学习历程的知识分享!

前言 本篇文章讲述前端工程化从模块化到如今的脚手架的发展&#xff0c;以及Webpack、Vue脚手架的详解&#xff01; 一、模块化 模块化就是把单独的功能封装到模块&#xff08;文件&#xff09;中&#xff0c;模块之间相互隔离&#xff0c;但可以通过特定的接口公开内部成员…

黑马智数Day2

表单基础校验实现 基础双向绑定 v-model <el-input v-model"formData.username" /> <script> export default {name: Login,data() {return {formData: {username: ,password: ,remember: }}} } </script> 表单校验配置 按照业务要求编写校验规…

231. 2 的幂 简单递归 python除法的类型

已解答 简单 相关标签 相关企业 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2x &#xff0c;则认为 n 是 2 的幂次方。 示例 1&#xff1a; 输入&…

【ollama 在linux 上离线部署 本地大模型】

本文继续来讲如何在linux上部署离线本地智能大模型&#xff0c;前篇如下&#xff1a;window上部署离线大模型 首先还是安装ollama linux版本&#xff0c;如果完全离线的话&#xff0c;可以从github上下载一个linux 版本的压缩包传上去 git hub上搜索ollama 找到右下角 找到li…