基于前后端分离的JWT登录思考

461 阅读3分钟

前后端分离,好多功能发生了变化,最明显的就是登录了,所以我们聊聊前后端分离的登录思路吧。

前后端分离登录问题

首先前后端分离带来的就是跨域问题,由于前后端分离之前是后端渲染数据,返回渲染结果,所以不存在跨域问题,但是前后端分离之后,前端和后端代码独立,存放在不同的服务器上,自然就有了跨域问题,这个我们之前是聊过的,大家可以回头翻看。

其次前后端分离,那么登录状态就需要前端和后端同时维持,前端需要把后端下发的token或者cookie保存好,并且每次请求携带;后端需要下发登录凭证,然后在每次请求的时候校验登录状态。

前后端分离解决方案

随着前后端分离技术的成熟,登录的问题自然是被解决了,那么我们聊聊最常见的解决方案,使用JWT_token进行登录校验。

JWT

先简单的介绍一下JWT,JWT是JSON Web Token的缩写,顾名思义,是用来进行web端token校验的技术规范,JWT极大的提高了token类型的登录的安全性,我们大概的聊一下他的原理:

image.png

JWT分为三部分,分别是:

Header: header部分是JWT的Json格式的元数据,存放前面的算法和令牌的类型,比如:

{
    "alg": "HS256",
    "typ": "JWT"
}

Payload:数据部分,这个部分存放用户的个人信息,也是json格式,但是需要注意的是,这里的内容虽然没有明文,但是也未加密,所以可以反向编码回来。所以像密码这样的信息是不可以存放到这里的。

payload有一些约定好的属性,也可以自定义,类似下面的json

{
    "iss": "下发人",
    "sub": "主题",
    "aud": "用户",
    "exp": "过去时间",
    "nbf": "生效时间,设置后,不达到时间不生效",
    "iat": "签发时间",
    "jti": "JWT标识"
}

Signature: 将加密后的header和payload进行拼接,然后用一个secret作为盐值进行加密。这一部分是校验JWT字符串正确性和安全性的保证,所以secret值一定不能泄露。

结果如下(结果当中以.划分三个部分):

eyJhbGciOiJIUzI1NiIsIn23CI6IkpXVCJ9.eyJzdWIiOiascxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflyjytbSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Python JWT

了解了JWT的原理之后,构建一个JWT字符串其实不是很难,但是很多语言都有封装JWT的模块,直接导入使用即可,以Python为例:

python有三方的pyjwt模块来实现功能,首先先安装pyjwt:

pip3 install pyjwt

创建JWT

import jwt
headers = {"alg": "HS256","typ": "JWT"}  #jwt的headers部分
secret = "sdfasdfcxz123cx1233121#!@#" #盐值
payload = {
    "username": "laobian",
    "age": 18,
    "user_id": "laobian"
} #jwt自定义部分
#生产JWT
resut = jwt.encode(payload=payload, key=secret, lgorithm="HS256", headers=headers)

校验JWT

import jwt
​
def valid_token(token):
    secret = "sdfasdfcxz123cx1233121#!@#" #盐值
    try:
        result = jwt.decode(token, secret, algorithms=['HS256'])   #解析jwt字符串,这里的盐值和加密时候的盐值一定要一致   
    except Exception as e:
        result = str(e)
        flag = False
    else:
        flag = True
    return {"data": flag, "message": result}
       

前后端分离登录流程

基于JWT技术,来看一下登录的流程和前后端需要做的工作:

image.png

这个过程当中,后端基本的功能包括:

1、下发jwt token

2、校验JWT token

后端的基本功能:

1、保存jwt token

2、请求携带jwt_token

关于前后端分离JWT登录就先聊到这里,欢迎各位大佬多多指点。