Vue express鉴权零基础入门
更新时间：2023年02月15日 08:31:07 作者：星海拾遗
这篇文章主要介绍了详解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字段
最后就可以随心所欲的想在那个接口验证就在那个接口验证（还是建议写个全局中间件统一验证）
隔十秒之后再次发送请求
鉴权成功!
到此这篇关于Vue express鉴权零基础入门的文章就介绍到这了,更多相关Vue express鉴权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue时间轴 vue-light-timeline的用法说明
这篇文章主要介绍了Vue时间轴 vue-light-timeline的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue组件中实现嵌套子组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue中如何使用AJAX实现读取来自XML文件的信息,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以参考下2023-12-12
在我们日常开发中经常因为思维定式，我们会犯一些奇怪的错误，有时候看似简单的问题却给出了复杂的解决方案。下面这篇文章主要介绍了vue.js父组件使用外部对象的方法，这个看似简单却绕了一些弯路的问题，有必要和大家分享下，需要的朋友可以参考学习，下面来看看吧。2017-04-04
下面小编就为大家带来一篇Vue-resource拦截器判断token失效跳转的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了基于Echarts图表在div动态切换时不显示的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在 Web 应用程序中,有时需要为某些内容提供全屏显示的功能,本文将介绍如何使用 Vue.js 3 的 Composition API 创建一个全屏功能的工具类,希望对大家有所帮助2024-03-03
element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验，本文实现了vue可拖拽的dialog弹框，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
今天小编就为大家分享一篇实现vuex与组件data之间的数据同步更新方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论