概念理解：
* 刷新令牌的过期时间设置的要比 token久
* 我们使用token来进行用户是否登录判断， 当token过期后， 前端使用 刷新令牌， 来获取新的token
实现步骤
* 当用户登录成功后，返回 token 和 refresh_token
* 前端将其保存起来(保存位置看情况而定)
* 在发送请求的时候携带上 token， 默认的是在 Authorization， 可以自己设置（看下边链接）
* 后台判断是否符合要求，是否过期， 一般由自带装饰器完成
* 加入过期，前端，携带 refresh_token 默认的是在 Authorization， 可以自己设置（看下边链接） 去后台获取新的token，然后保存，再次请求
后端实现：
`from flask import Flask, request, jsonify, render_template
from flask_jwt_extended import (
JWTManager, jwt_required, create_access_token,
jwt_refresh_token_required, create_refresh_token,
get_jwt_identity
)
import config
app = Flask(name)
app.config["JWT_ACCESS_TOKEN_EXPIRES"] = 5 # 设置token过期时间5秒
app.config['JWT_SECRET_KEY'] = 'super-secret'
app.config["JWT_TOKEN_LOCATION"] = ['json'] # 在这里我设置 默认从前端请求时带的json数据中，获取token和 refresh_token
app.config["JWT_JSON_KEY"] = "token" # 设置token 名字为token， refreshtoken为设置使用默认的refresh_token
app.config["JWT_REFRESH_JSON_KEY"] = "token"
app.config.from_object(config)
jwt = JWTManager(app)
@app.route("/index", methods=["GET"])
def index():
return render_template("login.html")
@app.route('/login', methods=['POST'])
def login():
# if request.method == "GET":
# return render_template("login.html")
# else:
username = request.form.get('username', None)
password = request.form.get('password', None)
if username != 'test' or password != 'test':
return jsonify({"msg": "Bad username or password"}), 401
# Use create_access_token() and create_refresh_token() to create our
# access and refresh tokens
ret = {
'access_token': create_access_token(identity={"username": "liuyong", "age": "24"}),
'refresh_token': create_refresh_token(identity={"username": "liuyong", "age": "25"})
}
return jsonify(ret), 200
The jwt_refresh_token_required decorator insures a valid refresh
token is present in the request before calling this endpoint. We
can use the get_jwt_identity() function to get the identity of
the refresh token, and use the create_access_token() function again
@app.route("/test", methods=["POST"])
@jwt_required
def test():
a = get_jwt_identity()
print(a.get("username"))
print(a)
return jsonify({"tets": "test"})
to make a new access token for this identity.
@app.route('/refresh', methods=['POST'])
@jwt_refresh_token_required
def refresh():
current_user = get_jwt_identity()
ret = {
'access_token': create_access_token(identity=current_user)
}
return jsonify(ret), 200
@app.route('/protected', methods=['GET'])
@jwt_required
def protected():
username = get_jwt_identity()
return jsonify(logged_in_as=username), 200
if name == 'main':
app.run()`
前端代码：
`
<div class="login-div col-xs-12 col-sm-2 col-sm-offset-5">
<div class="form-group first">
<label for="exampleInputEmail1">用户名</label>
<input type="username" name="username" class="form-control username" id="exampleInputuserName1" placeholder="用户名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" name="password" class="form-control password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="login-btn">
<button type="button" class="btn btn-info">登录</button>
</div>
<hr/>
<div class="footer" >
<p> 还没有账户~ <a class="register">请求</a> </p>
</div>
</div>
</div>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script>
$(".btn").click(function(){
var username = $(".username").val();
var password = $(".password").val();
$.ajax({
url: "/login",
type: "POST",
data: {"username": username, "password": password},
success: function(data){
sessionStorage.setItem("token", data.access_token),
sessionStorage.setItem("refree_token", data.refresh_token),
console.log(data),
console.log(sessionStorage.getItem("token"))
console.log(sessionStorage.se)
// window.location.href = "/test"
}
})
});
$(".register").click(function(){ # 这里 携带token 向 test 发送post请求
var data = {"token": sessionStorage.getItem("token")}
$.ajax({
url: "/test",
type: "POST",
dataType:"json",
contentType:"application/json",
data: JSON.stringify(data), # 因为之前设置了从json中获取，所以务必保证，前端向后台发送的数据为 json数据，否则会获取不到
success: function(data){
console.log(data)
},
error: function(zhr){ # 这里未作其他判断， 只是当失败的时候（在测试用一般为token过期），使用 refresh_token 从后台获取新的token
var haha ={"token": sessionStorage.getItem("token"), "refresh_token": sessionStorage.getItem("refree_token")};
$.ajax({
url: "/refresh",
type: "post",
contentType:"application/json",
data: JSON.stringify(haha),
success: function(data){
sessionStorage.setItem("token", data.access_token) # 重新设置到session中
}
})
}
})
});
</script>