专栏首页Haytham的原创技术文章Haytham个人博客开发日志 -- Flask+Vue基于token的登录状态与路由管理
原创

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"

Vue配置Axios钩子

配置Axios钩子,在每次HTTP请求的头部都添加token

axios.interceptors.request.use(
	config => {
		let token = localStorage.getItem('Authorization');
		if(token){
			config.headers.common['token'] = token
		}
		return config
	},
	err => {
		return Promise.reject(err);
	});

实现HTTPBasicAuth

flask_httpauth模块实现的功能很少,其核心部分是我们需要自己实现@auth.verify_password这个回调函数,当被@auth.login_required修饰的视图函数被访问时,会先执行回调函数,在回调函数中将获取http头部的token,并验证该token是否合法,若合法则允许访问。

from flask_httpauth import HTTPBasicAuth
auth = HTTPBasicAuth()

@auth.verify_password
def verify_password(username_token):
	username_token = request.headers.get('Token')
	if username_token == '':
		return False
	else:
		g.currnet_user = User.verify_auth_token(username_token)
		g.token_used = True
		return g.currnet_user is not None


@auth.login_required
@app.route('/creatpost',methods=['POST'])
def new_post():
	json = request.get_json()
	newpost = Post(title=json['title'],content=json['content'])
	db.session.add(newpost)
	db.session.commit()
	return "200 OK"

备注

以上部分即是实现基于令牌管理的代码核心部分,阅读以上代码知晓思路即可,由于其还调用了诸如ORM中的函数的原因,所以只有以上部分代码功能并不健全,请参考下面简化后的完整代码。

完整代码

强调:以下代码出于简化的目的,皆为实现功能的最基本码,并没有遵循各种规范。

Flask

import os
from flask import Flask,make_response,render_template,redirect,url_for,jsonify,g,current_app,request,session
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy
from flask_httpauth import HTTPBasicAuth
from flask_login import login_user,UserMixin,LoginManager,login_required
from werkzeug.security import generate_password_hash,check_password_hash
from itsdangerous import TimedJSONWebSignatureSerializer as Serializer

basedir = os.path.abspath(os.path.dirname(__file__))

# SQLite
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret-key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir,'data.sqlite')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

# 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

# Http auth
auth = HTTPBasicAuth()

@auth.verify_password
def verify_password(username_token):
	username_token = request.headers.get('Token')
	if username_token == '':
		return False
	else:
		g.currnet_user = User.verify_auth_token(username_token)
		g.token_used = True
		return g.currnet_user is not None

@auth.error_handler
def auth_error():
	return unauthorized('Invalid credentials')

# 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"

@app.route('/register',methods=['POST'])
def register():
	json = request.get_json()
	email = json['username'] + '@email.com'
	user = User(email=email,username=json['username'],password=json['password'])
	db.session.add(user)
	db.session.commit()
	return "200 OK register"


@app.route('/postlist')
def article():
	ptemp = Post.query.all()
	return jsonify({
			'posts': [post.to_json() for post in ptemp],
		})

@auth.login_required
@app.route('/creatpost',methods=['POST'])
def new_post():
	json = request.get_json()
	newpost = Post(title=json['title'],content=json['content'])
	db.session.add(newpost)
	db.session.commit()
	return "200 OK"

def unauthorized(message):
    response = jsonify({'error': 'unauthorized', 'message': message})
    response.status_code = 401
    return response

# ORM
class User(UserMixin,db.Model):
	__tablename__ = 'users'
	id = db.Column(db.Integer, primary_key=True)
	email = db.Column(db.String(64),unique=True,index=True)
	username = db.Column(db.String(64),unique=True,index=True)
	password_hash = db.Column(db.String(128))

	@property
	def password(self):
		raise AttributeError('password is not a readable attribute')

	@password.setter
	def password(self,password):
		self.password_hash = generate_password_hash(password)

	def verify_password(self,password):
		return check_password_hash(self.password_hash,password)

	def generate_auth_token(self,expiration):
		s = Serializer(current_app.config['SECRET_KEY'],expires_in = expiration)
		return  s.dumps({'id':self.id}).decode('utf-8')

	@staticmethod
	def verify_auth_token(token):
		s = Serializer(current_app.config['SECRET_KEY'])
		try:
			data = s.loads(token)
		except:
			return None
		return User.query.get(data['id'])

class Post(db.Model):
	__tablename__ = 'posts'
	id = db.Column(db.Integer, primary_key=True)
	title = db.Column(db.String(64),unique=True,index=True)
	content = db.Column(db.String(64))

	def to_json(self):
		json_post = {
			'title': self.title,
			'content': self.content,
		}
		return json_post

if __name__ == '__main__':
	db.drop_all()
	db.create_all()
	app.run()

Vue -- main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import router from './router';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import axios from 'axios';
import vueAxios from 'vue-axios';
import store from './store';
import Vuex from 'vuex'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(iView)
Vue.use(vueAxios,axios)
Vue.use(Vuex)

router.afterEach(route=>{
	window.scroll(0,0);
})

router.beforeEach((to,from,next)=>{
	let token = localStorage.getItem('Authorization');
	if(!to.meta.isLogin){
		next()
	}else{
		let token = localStorage.getItem('Authorization');
		if(token == null || token == ''){
			next('/')
		}else{
			next()
		}
	}
})

axios.interceptors.request.use(
	config => {
		let token = localStorage.getItem('Authorization');
		if(token){
			config.headers.common['token'] = token
		}
		return config
	},
	err => {
		return Promise.reject(err);
	});


new Vue({
  el:'#app',
  render: h => h(App),
  router,
  store,
})

Vue -- Vuex

import Vue from 'vue';
import Vuex from 'vuex';
import store from './index';

Vue.use(Vuex);

export default new Vuex.Store({
	state:{
		Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
	},
	mutations:{
		changeLogin (state, user) {
			state.Authorization = user.Authorization;
			localStorage.setItem('Authorization', user.Authorization);
		}
	},
})

Vue -- router

import Vue from 'vue'
import Router from 'vue-router'

import home from '../components/home.vue'
import articleDetail from '../components/articleDetail'
import createPost from '../components/createPost'

Vue.use(Router)
export default new Router({
	mode:'history',
	routes:[
		{
			path:'/',
			component:home,
			name:'home',
			meta:{
				isLogin:false
			}
		},
		{
			path:'/article',
			component:articleDetail,
			name:'article',
			meta:{
				isLogin:false
			}
		},
		{
			path:'/createpost',
			component:createPost,
			name:'createpost',
			meta:{
				isLogin:true
			}
		},
	]
})

Vue -- Components -- home.vue

<template>
	<div class="super">
		<div class="header">
			<div class="buttomDiv">
				<Button type="success" class="loginButton" @click="showLoginModal">Login</Button>
				<Button type="primary" class="loginButton" @click="showRegisterModal">Register</Button>
			</div>
		</div>

		<div class = "content">
			<div class="contentLeft">
				<div
					v-for = "post in blogList"
					>
					<thumbnail 
						v-bind:title=post.title
						v-bind:content=post.content
					></thumbnail>
				</div>
			</div>
			<div class="contentRight"></div>
			
		</div>

		<Modal v-model="registerModalStatus" @on-ok="registerEvent">
			<p>Register</p>
			<Input v-model="username" placeholder="Username" style="width: 300px" />
			<Input v-model="password" placeholder="Password" style="width: 300px" />
		</Modal>

		<Modal v-model="loginModalStatus" @on-ok="loginEvent">
			<p>Login</p>
			<Input v-model="username" placeholder="Username" style="width: 300px" />
			<Input v-model="password" placeholder="Password" style="width: 300px" />
		</Modal>

	</div>
</template>

<script>
	import axios from 'axios'
	import {mapMutations} from 'vuex'
	import store from '../store'
	import thumbnail from './articleThumbnail.vue'

	export default{
		name: 'home',
		data:function(){
			return {
				loginModalStatus:false,
				registerModalStatus:false,
				username:'',
				password:'',
				blogList:'',
			}
		},
		components:{
			thumbnail:thumbnail,
		},
		created(){
			localStorage.removeItem("Authorization","")
			let _this = this
			axios.get('http://127.0.0.1:5000/postlist')
					.then(function(response){
						_this.blogList = response.data.posts
					})
					.catch(function(error){
					})
		},
		methods:{
			...mapMutations([
				'changeLogin'
			]),
			showRegisterModal:function(){
				this.registerModalStatus = true;
			},
			showLoginModal:function(){
				this.loginModalStatus = true;
			},
			registerEvent:function(){
				let that = this
				axios.post('http://127.0.0.1:5000/register',{
					username:this.username,
					password:this.password,
					})
				.then(function(res){

				})
				.catch(function(error){

				})
			},
			loginEvent:function(){
				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){
					})
			},
			navigator:function(){
				this.$router.push("/article")
			},

		},
	}
</script>

<style scoped>

</style>

后记

完整代码github地址

haythamBlog

haythamBlog_flask

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Docker Swarms 跨主机集群搭建

    JerryWangSAP --- 错误消息 This computer doesn't have VT-X/AMD-v enabled

    HaythamXu
  • 不同方式实现集群的可行性 && 部分不建议踩的坑

    1.System has not been booted with systemd as init system (PID 1). Can't operate.

    HaythamXu
  • 《Flask Web开发 基于Python的Web应用开发实战》简评

    《Flask Web开发 基于Python的Web应用开发实战》,O'Reilly"动物书系列"的"狗书",应该是很多Flask初学者被推荐使用的入门书,但是这...

    HaythamXu
  • Spring和Token整合详解

    Spring 是一个非常流行和成功的 Java 应用开发框架。Spring Security 基于 Spring 框架,提供了一套 Web 应用安全性的完整解决...

    品茗IT
  • 基于Shiro,JWT实现微信小程序登录完整例子

    小程序官方流程图如下,官方地址 : https://developers.weixin.qq.com/miniprogram/dev/framework/ope...

    EalenXie
  • mall整合SpringSecurity和JWT实现认证和授权(一)

    https://github.com/macrozheng/mall-learning/tree/master/mall-tiny-04

    macrozheng
  • [android] 新闻客户端实现左侧导航点击切换

    给ListView的条目设置点击事件,setOnItemClickListener()方法,参数:上下文

    陶士涵
  • 分布式锁是怎么回事

    之前做微信钱包的项目,许多功能都需要与腾讯微信的前台(App)或后台交互,微信需要一个access_token凭证用于身份验证。

    普通程序员
  • Quartz2.x动态Job工具类 原

    有些需求,需要动态启动一个定时器,然后在一定条件下再停止。比如通过rest控制jenkins做发布,当发起一个构建后,就需要定时去查询构建状态,在构建完成后再停...

    尚浩宇
  • 数字货币有利于人民币国际化,数字化之路是正确选择

    从商品货币演化到信用货币,货币自身的价值属性不断向交易的便利性妥协。然而,带着降低交易成本之使命而降生的货币,反而成了增加交易成本的源头之一。这集中体现在国际经...

    互融云

扫码关注云+社区

领取腾讯云代金券