Vue express鉴权零基础入门
作者:星海拾遗 发布时间:2024-05-13 09:11:29
标签:Vue,express,鉴权
讲在前面的话:一个成熟的全栈工程师开发的前后端项目鉴权是必不可少的,接下来我们就用一篇文章来介绍一下express鉴权之路。
本文主要目的是介绍鉴权,那么默认读者已经配置完成了express的跨域基本配置以及options请求处理以及post请求参数接收 如果没有配置也没有关系,试一下我封装的包,不好用你找我麻烦
npm i wxs-express-config
const wxsExpressConfig = require("wxs-express-config");
// 返回一个经过wxs封装之后的app
const app = wxsExpressConfig();
这个app就是经过我封装后的express app,但是默认设置了全局跨域和接受post请求参数等配置。如果不想全局跨域可以这样配置
// 返回一个经过wxs封装之后的app
const app = wxsExpressConfig({ CROSURL: "http://localhost:3000" });
token图示一点通
看这个示意图就知道校验过程是很简单的,实际操作起来更加简单。
express鉴权
下载加密/解密包
在express中鉴权需要用到一个玩意儿,为了避免出错,这里指定一下版本
// jsonwebtoken 加密用的 express-jwt是解密用的
npm i jsonwebtoken@8.5.1
加密基本使用(生成token)
第一步毫无疑问的是引入
const jwt = require("jsonwebtoken");
使用jsonwebtoken生成token就只有一行代码
jwt.sign('需要加密的信息', '自定义的加密密钥', '额外的配置信息,一般是Token过期时间'),
举个🌰
jwt.sign({<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> username: "wxs" }, '巴啦啦小魔仙随地大小变', {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> expiresIn: "10s" }),
这里就生成了一个用巴啦啦小魔仙随地大小变密钥加密{ username: “wxs” }且有效时间为10s的Token
传递Token
express定义一个接口
app.post("/login", (req, res) => {
res.send({
code: 0,
message: "登录成功",
token: jwt.sign({ username: "wxs" }, secretKey, { expiresIn: "10s" }),
});
});
app.listen(3001, () => {
console.log("your localServer is running on http://localhost:3001");
});
查看token
使用postman
验证token
再定义另一个接口
app.get("/getUserInfo", (req, res) => {
try {
jwt.verify(req.query.token, secretKey);
res.send("一个get请求想获取用户信息");
} catch (err) {
res.send("过期了,请重新登录");
}
});
postMan编辑如下
注意填上token字段
最后就可以随心所欲的想在那个接口验证就在那个接口验证(还是建议写个全局中间件统一验证)
隔十秒之后再次发送请求
鉴权成功!
来源:https://blog.csdn.net/qq_38280242/article/details/123715264
0
投稿
猜你喜欢
- 目录使用软件问题描述搭建神经网络训练参数损失函数参数优化代码数据集参数训练测试结语Hello,兄弟们,开始搞深度学习了,今天出第一篇博客,小
- 对于一个多元函数 用牛顿法求其极小值的迭代格式为其中 为函数 的梯度向量, 为函数 的Hesse(Hessian)矩阵。上述牛顿法
- 最近ChatGpt异常火热,访问网站经常会出现1020的错误代码,或无法访问。大概率是因为服务器压力大,网关返回的1020错误码,只能等待官
- 一、this指向构造函数实例化对象在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,如下例:function Benjam
- 本文实例讲述了CI操作cookie的方法。分享给大家供大家参考,具体如下:CI 操作cookie 有三种方法,2中Ci自带的,其
- 本文简单介绍如何使用 Python 的 pyautogui 模块实现鼠标的自动移动以及键盘的自行输入. 该模块不是 Python 自带的,
- 一、matplotlib.pyplot.boxplot()语法boxplot(x, notch=None, sym=None, vert=N
- 因为云服务器的centos是没有图形界面的,所以安装比较麻烦,刚好19c有本地rpm的安装方法,所以推荐用rpm安装。首先到官网下载rpm包
- 本文实例讲述了Python标准库shutil用法。分享给大家供大家参考,具体如下:shutil模块提供了许多关于文件和文件集合的高级操作,特
- 一、查看實例名時可用1、服务—SQL Server(实例名),默认实例为(MSSQLSERVER)或在连接企业管理时-查看本地实例2、通過注
- 初学框架vue搭配vux使用发现这个UI库使用有些力不从心。下面说说自己在表单验证过程遇到的两个需求问题及解决的方法。1.使用x-input
- MySQL是一个开源的关系型数据库管理系统,支持多种操作语言,其中最基础、最常用的命令之一就是SELECT语句。在本篇文章中,这里将详细介绍
- 本文实例讲述了Python3实现对列表按元组指定列进行排序的方法。分享给大家供大家参考,具体如下:Python版本: python3.+ 运
- 一.图像漫水填充图像漫水填充(FloodFill)是指用一种特定的颜色填充联通区域,通过设置可连通像素的上下限以及连通方式来达到不同的填充效
- PHP 中文工具类,支持汉字转拼音、拼音分词、简繁互转。PHP Chinese Tool class, support Chinese pi
- Oracle text是Oracle的全文检索技术,是9i版本标准版和企业版的一部分。Oracle text使用标准的sql语言索引、查找、
- settings文件中配置:LOGGING = { 'version':1, 'disabl
- 本文是对《Python Qt GUI快速编程》的第10章的例子剪贴板用Python3+PyQt5进行改写,分别对文本,图片和html文本的复
- 程序的功能有了个大体的框架,其实可以自己添加一些功能,比如开始的数据库连接 ,可以先设置变量然后通过INIT() 来选择
- Python写一些简单的GUI界面也是非常简单的,并且Python有着丰富的库,这些库可以很方便我们去操作Windows系统,搭配界面,可以