flask+vue使用jwt验证

为什么要使用jwt验证?

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

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

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

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

Flask后端代码

shell 复制代码
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") # 生成token
        print(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保存在浏览器里

shell 复制代码
npm install vue-cookies --save

main.js

js 复制代码
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

app.js

js 复制代码
created(){
      // 设置cookies 30天后过期
      this.$cookies.config('30d')

      // window object
      window.$cookies.config('30d')
      
    }

保存token到cookies里

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

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

js 复制代码
request.post("/submit_edit",  this.form, {headers:{token: this.$cookies.get('token')}})
相关推荐
Sheldon一蓑烟雨任平生7 分钟前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
程序员爱钓鱼23 分钟前
Python编程实战 · 基础入门篇 | 第一个Python程序:Hello World
后端·python·编程语言
夏天想43 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
川石课堂软件测试1 小时前
CSS中常用的几种定位。
开发语言·css·python·网络协议·http·html·pytest
yiludegeX1 小时前
fluth-vue: 体验流式编程范式之美
vue.js·前端框架·rxjs
C.R.xing1 小时前
Pyspark分布式访问NebulaGraph图数据库
数据库·分布式·python·pyspark·nebulagraph
我是华为OD~HR~栗栗呀1 小时前
华为OD-21届考研-Java面经
java·前端·c++·python·华为od·华为·面试
没有鸡汤吃不下饭2 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
Java陈序员2 小时前
宝藏工具站!一个轻量实用的在线工具集合!
vue.js·nuxt.js
喝西瓜汁的兔叽Yan2 小时前
书架效果的实现
javascript·vue.js