Flask+Vue-Router+JWT实现登录验证
目录
简要
后端Flask代码
secret.py
main.py
前端Vue3代码
router.js
api.js
登录组件
一些方法的介绍
1.前端
1.1localStorage
1.1.1localStorage.setItem(key,value)
1.1.2localStorage.getItem(key)
1.1.3localStorage.removeItem(key)
1.1.4localStorage.clear()
1.1.5localStorage.length
1.2sessionStorage
1.1.1sessionStorage.setItem(key,value)
1.1.2sessionStorage.getItem(key)
1.1.3sessionStorage.removeItem(key)
1.1.4sessionStoragee.clear()
1.1.5sessionStorage.length
2.后端
2.1JWT
简要
后端：Flask
前端：Vue3
实现功能：
- 实现登录验证，只有用户登录后，才可以访问某些特定的页面
- 实现登录状态保存，当用户登陆后，可以保持一段时间的登录状态，在此期间无需再次登录
- 实现JWT的过期验证、安全验证
在此之前，后端需要安装如下Python库：
pip install PyJWT前端需要安装如下包：
npm install axios实现思路：
- 当用户登陆后，由后端Flask生成一个经过加密的token(内含用户id、过期时间)，并发送给前端
- 前端保存token(使用localStorage)
- 前端每次访问页面，首先判断该页面是否需要登录，如果需要登录判断此时是否登录，如果登录判断token是否合法(交由后端解密token判断)
- 若不合法，则跳转到登录页面
具体流程图如下图所示：
后端Flask代码
为方便管理，将生成、验证token的代码，单独拿出来作为一个py文件(secret.py)
路由函数单独在(main.py)中
secret.py
import jwt
import secrets
from datetime import datetime,timedelta
# 生成token密钥
secret_key = secrets.token_hex(32)
#jwt函数
def generate_jwt(user_id):
"""
生成 JWT 令牌
:param user_id: 用户 ID
:return: 生成的 JWT 令牌
"""
payload = {
'user_id': user_id,
'exp': datetime.utcnow() + timedelta(minutes=30) # 设置过期时间为 30 分钟后
}
token = jwt.encode(payload,secret_key,algorithm='HS256')
return token
def verify_jwt(token):
"""
验证 JWT 令牌
:param token: 待验证的 JWT 令牌
:return: 若验证通过，返回用户 ID；否则返回 None
"""
try:
data = jwt.decode(token,secret_key,algorithms=['HS256'])
exp = data.get('exp')
if exp and datetime.utcfromtimestamp(exp) < datetime.utcnow():
return None
return data.get('user_id')
except:
return None
#仅返回用户id
def get_token(token):
data = jwt.decode(token,secret_key,algorithms=['HS256'])
return data.get('user_id')main.py
首先从request请求的headers中获取“Authorization”请求头，该请求头包含前端发送的token
#JWT相关
import secret as key
#flask相关
from flask import Flask,request,jsonify
from flask_cors import CORS
app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = key.secret_key
CORS(app)
#jwt函数
@app.route('/check_token', methods=['GET'])
def check_token():
"""
检查 JWT 令牌是否有效且未过期
"""
token = request.headers.get('Authorization')
if not token:
return jsonify({'code':401,'message': 'token缺失'})
user_id = key.verify_jwt(token)
if user_id:
return jsonify({'code':200,'message': 'token合法', 'user_id': user_id})
return jsonify({'code':401,'message': 'token不合法'})
前端Vue3代码
同样为了方便管理，在前端中，将Vue-Router配置单独写进(router.js)文件中。
将检查token函数单独写进(api.js)中
至于保存token代码，写在登录组件中即可
router.js
import axios from 'axios'
router.beforeEach(async (to,from,next) => {
const token = localStorage.getItem('access_token');
// 判断是否需要验证登录
if (to.meta.requireAuth){
// 没有token
if (!token) {
next({name: 'login'});
}
else {
// 有token，检查token是否过期、是否合法
try {
const response = await axios.get('http://127.0.0.1:5000/check_token',{
headers:{
Authorization:`${token}`
}
});
// 合法直接跳转
if (response.data.code == 200){
next();
}
// 过期或非法，重新登录
else{
localStorage.removeItem('access_token');
next({name: 'login'});
}
}
// 网络错误，重新登录
catch (error) {
localStorage.removeItem('access_token');
next({name: 'login'});
}
}
}
// 不需要直接跳转
else {
next();
}
})这里的meta是一个自定义属性，当某路由需要登录验证时，只需在路由处添加meta属性即可，如下所示：
{
//有meta属性，需要登录验证
path:'/test1',
component:() => import('test1.vue'),
meta:{
requireAuth:true
}
},
{
//没有meta属性，不需要登录验证
path:'/test2',
component:() => import('test2.vue'),
},api.js
import axios from 'axios'；
// 登录
async function login(data){
try {
const response = await axios.post('http://127.0.0.1:5000/user/login',data);
return response.data;
}
catch (error) {
return error
}
}
//检查token是否过期
export async function check_token(token){
try {
const reponse = await axios.get('http://127.0.0.1:5000/check_token',{
headers:{
Authorization:`${token}`
}
});
return reponse.data;
}
catch (error) {
return error;
}
}登录组件
这里只需要登陆后，保存token即可
import {login} from api;
async function upload(data){
try {
const response = await login(data);
if (response.code == 200){
//存储token
localStorage.setItem('access_token',response.access_token);
/... 其他操作 ... /
}
else {
console.log(error);
}
}
catch (error) {
console.log(error);
}
}一些方法的介绍
在这里将介绍一下前端、后端用到的一些方法
1.前端
1.1localStorage
localStorage是HTML5新增的一个会话存储对象，用于保存某页面的数据，在关闭页面后数据不会被清除，除非主动删除，否则会永远存在。
- 数据存储：将数据以键值对的形式存储在浏览器中，这些数据会一直保留在浏览器中，直到手动清除
- 作用域：数据是基于源(协议、域名、端口)的，不同源的页面无法互相访问对方的localStorage
- 存储大小：通常是5MB
- 数据类型：localStorage只能存储字符串类型的数据
1.1.1localStorage.setItem(key,value)
- 功能：用于向localStorage中添加数据
// 存储一个字符串
localStorage.setItem('username','John');
//存出一个对象，需要先转换为JSON字符串
const user = {
name:'Jane',
age:25
};
localStorage.setItem('user',JSON.stringify(user));1.1.2localStorage.getItem(key)
- 功能：从localStorage中获取指定键对应的值
//获取存储的字符串
const username = localStorage.getItem('username');
//获取存储的对象，需要将JSON字符串转换为对象
const userJSON = localStorage.getItem('user');
const userObj = JSON.parse(userJSON);
1.1.3localStorage.removeItem(key)
- 功能：从localStorage中删除指定键和对应的数据
//移除username数据
localStorage.removeItem('username');
1.1.4localStorage.clear()
- 功能：清除localStorage中所有的键和数据
//清除所有存储的数据
localStorage.clear();1.1.5localStorage.length
- 定义：localStorage的一个属性
- 功能：返回localStorage中存储的键值对的数量
//返回localStorage中存储的键值对的数量
const count = localStorage.length;1.2sessionStorage
sessionStorage是HTML5新增的一个会话对象，用于临时保存某页面的数据，在关闭页面后数据会被清除。
- 数据存储：以键值对的形式存储数据，但数据仅在当前会话期间有效
- 作用域：基于源(协议、域名、端口)的，不同页面之间无法互相访问对方的sessionStorage，即不同页面之间的数据相互独立
- 存储大小：通常是5MB
- 数据类型：只能存储字符串类型的数据
1.1.1sessionStorage.setItem(key,value)
- 功能：用于向sessionStorage中添加数据
// 存储一个字符串
sessionStorage.setItem('username','John');
//存出一个对象，需要先转换为JSON字符串
const user = {
name:'Jane',
age:25
};
sessionStorage.setItem('user',JSON.stringify(user));1.1.2sessionStorage.getItem(key)
- 功能：从sessionStorage中获取指定键对应的值
//获取存储的字符串
const username = sessionStorage.getItem('username');
//获取存储的对象，需要将JSON字符串转换为对象
const userJSON = sessionStorage.getItem('user');
const userObj = JSON.parse(userJSON);
1.1.3sessionStorage.removeItem(key)
- 功能：从sessionStorage中删除指定键和对应的数据
//移除username数据
sessionStorage.removeItem('username');
1.1.4sessionStoragee.clear()
- 功能：清除sessionStorage中所有的键和数据
//清除所有存储的数据
sessionStorage.clear();1.1.5sessionStorage.length
- 定义：sessionStorage的一个属性
- 功能：返回sessionStorage中存储的键值对的数量
//返回sessionStorage中存储的键值对的数量
const count = sessionStorage.length;2.后端
2.1JWT
在PyJWT中，有encode(编码)、decode(解码)两个主要方法：
encode(payload,secret_key,algorithm)方法生成一个JWT格式的token：
- pyload：JWT的主要组成部分，用来存储传递的数据，例如可以存储用户id、过期时间等等
- secret_key：生成token的密钥，没有密钥无法解析token
- algorithm：JWT的编码格式
decode(token,secret_key,algorithm)方法解析一个JWT格式的token：
- token：需要解析的token
- secret_key：token的密钥
- algorithm：JWT的编码格式
由此可见，一个JWT的安全由：“secret_key密钥”和“algorithm编码格式”两部分来维护
在实际应用中，应尽可能的生成复杂的密钥，并且定时更换密钥