Haytham个人博客开发日志 -- Flask+Vue基于token的登录状态与路由管理

指路牌

符合一下关键词，这篇博客有可能会对你有帮助

• 不使用工厂函数的Flask应用
• 不使用蓝本的Flask应用
• Flask跨域配置
• 基于Token的登录状态管理
• Flask+Vue
• Vue路由拦截
• Axios 钩子

适用场景

这是一篇个人博客搭建的记录博客，也是一篇关于Flask和Vue的简单"工具书"，最后的代码会包含Web开发中常用的功能。(不全，只是使用频率相对高的)

环境

• 系统: 无关
• Flask(Python3)
• Vue(Node.js)

参考

《Flask Web开发 基于Python的Web应用开发实战》
Vue.js

背景

个人博客的解决方案那么多，为什么我要自己再搭建一个呢？
其实搭建个人博客的目的并不是为了写博客…否则直接使用WordPress了，个人博客只是我想要实践自己学的技术，同时考虑到以后可能会加入负载均衡、集群等技术，导致架构大改，或者尝试实现语音控制等新玩法，一行一行码出来的在操作的可行性上必然是更好的。

代码功能

博客功能尚不健全，只实现了以下的基本功能
前端：注册登陆，博客创建(markdown编辑器)，首页拉取所有文章，创建博客需要登陆状态。
后端：以上服务需要的视图函数，配置跨域，令牌管理与验证，数据库管理。

出于记录的分享的目的，将实现登录状态管理的代码整理如下

实现思路

要实现基于令牌的登录状态管理，其思路大致如下

1. 前端将帐号密码提交后台
2. 后台验证，通过这返回token
3. 前端在每次请求前将token设置到请求头当中(使用axios钩子)
4. 后台在受保护的视图函数被调用时获取请求头的token，并验证token，若无问题则允许调用

这是一个大致的思路，后续调用手保护的视图函数部分，无论是让前后端完成什么操作，都可以执行根据需要实现。
以下部分将根据以上思路的顺序，展示主要代码，最后将贴出完成代码。

具体步骤

Flask配置跨域

前后端分离首选需要配置跨域，此处采用后端解决的方案，使用flask_cors库，代码如下：

由于会前端在获取token后会在每次HTTP请求时将token设置在头部，我给出的命名为’token’，若使用了其他名称，需在’Access-Control-Allow-Headers’中替换

from flask_cors import CORS

CORS(app,supports_credentials=True)
@app.after_request
def after_request(resp):
	resp = make_response(resp)
	resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8080'
	resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
	resp.headers['Access-Control-Allow-Headers'] = 'content-type,token'
	return resp

Vue通过axios向flask发起登录请求

前端将获取的帐号密码传递给后台，将请求获取的token写入Vuex中。(Vuex中会将token写入localStorage)

let _this = this
axios.post('http://127.0.0.1:5000/login',{
	username:this.username,
	password:this.password,
})
.then(function(response){
	let token = response.data
	_this.changeLogin({Authorization: token})
})
.catch(function(error){
})

Flask实现视图函数

视图函数将通过用户名和密码，验证用户信息，并生成token，返回token。

# Routes
@app.route('/login',methods=['POST'])
def login():
	json = request.get_json()
	user = User.query.filter_by(username = json['username']).first()
	if user.verify_password(json['password']):
		g.currnet_user = user
		token = user.generate_auth_token(expiration=3600)
		return token
	return "wrong password"