flask+vue使用jwt验证

news/2024/11/17 4:55:27/

为什么要使用jwt验证?

jwt(json web token)主要用来解决单点登录(SSO)问题。设想一个场景,你在淘宝登录了你的账号,然后打开天猫(天猫属于淘宝的子网站),那么你需不需要重新登录呢?答案是不用,你会发现天猫。在一个站点登录后,在其它子站点就不需要重复登录,这就是单点登录。

传统的方法用session解决,session保存在服务端,记录用户的登录信息。然而像淘宝这种大型网站往往有多个服务器,服务器之间需要session共享才能实现上述功能。

jwt能较好解决这个问题。用户登录完成后,由服务端签发一个token,包含了用户登录信息,过期时间等等。然后把它加密发给用户,用户下次请求的时候把它放在请求头传给服务端,服务端经过愉快的解密就可以知道用户已经登录啦!

在我的小项目当中,用户登录只需要密码,用session不好处理,所以也采用了jwt验证方法。

Flask后端代码

pip install pyjwt
python">import jwt
app.secret_key = b'secret_key'@app.route("/login", methods=["POST"])
def login():if request.method == 'POST':print("password",request.json['password'])token = jwt.encode({'exp': datetime.now(tz=timezone.utc) + timedelta(seconds=3600), 'password':request.json['password']}, current_app.config['SECRET_KEY'], algorithm="HS256") # 生成tokenprint(token)return jsonify(err="已生成token", token=token)# 装饰器函数
def login_required(func):@functools.wraps(func) # 修饰内层函数,防止当前装饰器去修改被装饰函数的属性def inner(*args, **kwargs):print("token",request.headers.get('token'),type(request.headers.get('token')))if request.headers.get('token')!='null':password = jwt.decode(request.headers.get('token'), current_app.config['SECRET_KEY'], algorithms="HS256")['password']# print(password)if password == '123':return func(*args, **kwargs)else:return jsonify(err="无效token")else:return jsonify(err="请输入密码")return inner

Vue前端代码

前端需要用到cookies,把token保存在浏览器里

npm install vue-cookies --save

main.js

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

app.js

created(){// 设置cookies 30天后过期this.$cookies.config('30d')// window objectwindow.$cookies.config('30d')}

保存token到cookies里

request.post('/login',{"password":value}).then(res=>{that.$cookies.set("token",res['token'])}

在请求头里携带token发送请求

request.post("/submit_edit",  this.form, {headers:{token: this.$cookies.get('token')}})

http://www.ppmy.cn/news/1547634.html

相关文章

Diff 算法的误判

起源: 设想一下,假如你桌面上的文件都没有文件名,取而代之的是,你使用通过文件的位置顺序即index来区分它们———第一个文件,第二个文件,以此类推。也许这种方式可行,可是一旦你删除了其中的一…

22.04Ubuntu---ROS2创建python节点

创建工作空间 mkdir -p 02_ros_ws/src 然后cd到该目录 创建功能包 在这条命令里,tom就是你的功能包 ros2 pkg create tom --build-type ament_python --dependencies rclpy 可以看到tom功能包已经被创建成功了。 使用tree命令,得到如下文件结构 此时…

【leetcode练习·二叉树】用「分解问题」思维解题 II

本文参考labuladong算法笔记[【强化练习】用「分解问题」思维解题 II | labuladong 的算法笔记] 技巧一 类似于判断镜像二叉树、翻转二叉树的问题,一般也可以用分解问题的思路,无非就是把整棵树的问题(原问题)分解成子树之间的问…

CSS回顾-基础知识详解

一、引言 在前端开发领域,CSS 曾是构建网页视觉效果的关键,与 HTML、JavaScript 一起打造精彩的网络世界。但随着组件库的大量涌现,我们亲手书写 CSS 样式的情况越来越少,CSS 基础知识也逐渐被我们遗忘。 现在,这种遗…

商品规格递归拼接

创建实体类 Data public class Shopping {private String name;private List<String> children; } 测试 public static void main(String[] args) {ArrayList<Shopping> shoppings new ArrayList<>();Shopping shopping new Shopping();shopping.setName…

PL/SQL执行.sql文件

1.编写.sql文件&#xff0c;创建update.sql文件&#xff0c;文件如下&#xff1a; set feedback offset define off--更新表中所有人的年龄update a set age18;prompt Done. 2.打开plsql选择命令窗口&#xff0c;即选择File->New->Command Window&#xff1b; 打开后的…

windows下git和TortoiseGit(小乌龟)和putty安装配置对github进行操作

本次安装版本如下&#xff1a; 1&#xff0c;先下载安装tortoiseGit一路下载安装即可一直到在桌面上右键可以看到有git的选项出现为止&#xff0c;注意在第一步的时候选择使用putty还是ssh建立网络连接决定后面的步骤&#xff0c;本次以选择putty为例。 2&#xff0c;安装git&a…

[GXYCTF2019]BabyUpload--详细解析

信息搜集 进入界面&#xff0c;直接就是文件上传界面&#xff0c;结合题目&#xff0c;得知考察的是文件上传漏洞。 思路 文件上传漏洞&#xff0c;第一步先看有没有前端校验&#xff1a; 没有前端校验。 我们写一个一句话木马文件&#xff1a; //shell.php GIF89a <…