Python Flask前端自动登录功能实现示例

导读这篇文章主要介绍了Python Flask前端自动登录功能实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

引言

在已有的网站中,几乎所有的网站都已经实现了 自动登录

所谓自动登录,其实就是在你登录后,然后关闭浏览器,接着再启动浏览器重新进入刚刚的网站时,无需自己再次登录。更准确的说,在一段时间内,无需自己再次登录

思路:其实所谓的自动登录,到最后的后端逻辑,和你正常的登录逻辑是一样的,也是判断用户名和密码是否正确。只是我们要省略让用户再次输入用户名和密码的步骤,那么肯定就要将用户名和密码存储在一个地方。当检测到用户再次进入时,看看是否满足可以自动登录的条件,满足的话,将保存的用户名和密码取出来,帮用户自动登录。那我们就要去想,将用户名和密码存储到什么地方

在本篇文章中,本人会在 Flask 项目中使用 ** session + cookie** 的方式,实现上述的功能

实现的方式有很多种,下面的只是其中一种,大家可以自己的需求进行改造和拓展

1. 登录时

登录,前端传来用户名和密码,然后去后端进行验证。如果用户名和密码都正确,则正常登录

此时,我们需要把用户名、密码存进 cookie 中,然后在 session 存储一个是否已经登录的标识

重要的话说三次:

存储密码时,记得加密!

存储密码时,记得加密!

存储密码时,记得加密!

参考代码如下

from flask import make_response, session, request
@user.route('/login', methods=['POST'])
def login():
    username = request.form.get('username').strip()
    password = request.form.get('password').strip()
    ......  //  自己的逻辑处理
    if 登录成功:
        session['islogin'] = 'true'  //  是否已经登录的标识
        session['username'] = username  //  根据自己的需求,在session里存储一些值
        # 将Cookie写入浏览器
        response = make_response('login-pass')  //  登录成功,返回给前端的值
        response.set_cookie('username', username, max_age=30*24*3600)  //  max_age,cookie的存活时间,这里表示一个月
        response.set_cookie('password', password, max_age=30*24*3600)
        return response
    else:
        return 'login-fail'  //  登录失败,返回给前端的值

2. 定义全局拦截器

这个时候,可能会有人有疑问,为什么要使用拦截器?

试想:进入一个网站有多个入口,你知道用户会以哪个入口来访问你的网站吗?那我们总不能每一个进入网站的接口都去写一份自动登录的逻辑代码吧。所以我们可以直接使用拦截器,将所有的请求都拦截起来,进行统一的处理。然后将静态的资源和不用进行自动登录逻辑处理的请求过滤掉即可

在程序的主入口 main.py 定义一个拦截器

# 定义全局拦截器,实现自动登录
@app.before_request
def before():
    url = request.path
    pass_list = ['/user', '/login', 'logout']  //  不用进行自动登录逻辑判断的请求
    if url in pass_list or url.endswith('.js') or url.endswith('.jpg'):
        pass  //  过滤不用进行自动登录逻辑处理的请求和静态的资源
    else:
        if session.get('islogin') is None:
            username = request.cookies.get('username')
            password = request.cookies.get('password')
            if username != None and password != None:
                ......  //  自己的逻辑处理
                if 登录成功:
                    session['islogin'] = 'true'  //  是否已经登录的标识
                    session['username'] = username  //  根据自己的需求,在session里存储一些值

3. 退出登录时

退出登录时,清空 session 和 cookie

from flask import make_response, session, request, url_for
@user.route('/logout')
def logout():
    # 清空session和Cookie,页面跳转
    session.clear()
    response = make_response('注销并进行重定向', 302)  # 302状态码表示重定向
    # 两种重定向的方法
    # response.headers['Location'] = '/'
    response.headers['Location'] = url_for('index.home')  # 另一种方式,括号里的值写请求为“/” 的 - Blueprint名.方法名
    # 两种清除cookie的方式
    response.delete_cookie('username')
    response.set_cookie('password', '', max_age=0)
    return response

上面第二种重定向方式中,所对应的值

index = Blueprint("index", __name__)
@index.route('/')
def home():
    ......  //  自己的逻辑处理

到此这篇关于Python Flask前端自动登录功能实现详解的文章就介绍到这了

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Python Flask 和 Vue 前端可以通过 RESTful API 进行交互。以下是一个简单的示例: 1. 在 Flask 中编写 API: ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_data(): # 获取前端发送的参数 param = request.args.get('param') # 处理参数 result = do_something(param) # 将结果返回给前端 return jsonify(result) ``` 2. 在 Vue 中发送请求: ```javascript import axios from 'axios' export default { data() { return { result: null } }, methods: { fetchData() { axios.get('/api/data', { params: { param: 'hello' } }).then(response => { this.result = response.data }).catch(error => { console.log(error) }) } } } ``` 在这个示例中,Vue 组件中的 `fetchData` 方法使用 `axios` 发送 GET 请求到 Flask 的 `/api/data` 接口,并传递一个名为 `param` 的参数。Flask 中的 `get_data` 函数接收这个参数并处理后返回一个 JSON 格式的结果,这个结果会被 Vue 组件中的 `result` 数据接收并显示在页面上。 ### 回答2: Python Flask是一种轻量级的Web应用框架,它提供了灵活的路由系统、模板引擎及多种其他功能,可以快速搭建Web应用。而Vue是一种前端框架,提供了多种组件和工具,使得前端开发更加简单和便利。 在Python Flask与Vue前端交互方面,主要有两种方法:RESTful API和Websocket。 首先,RESTful API是一种基于HTTP协议的接口设计风格,使用HTTP请求(GET、POST、PUT、DELETE等)来处理客户端请求,并返回JSON格式的数据。在Flask中,可以使用Flask-restful等库来构建RESTful API,通过提供API接口,Vue可以轻松实现Python后台的数据访问和更新。 其次,Websocket是一种双向通信协议,它使用WS协议在浏览器和服务器之间创建长连接,实现服务器端主动推送数据到客户端或客户端主动向服务器发送数据的功能。在Flask中,可以使用Flask-SocketIO等库来实现Websocket支持,Vue可以通过SocketIO库连接到Python后台的Websocket服务器,使用实时通信功能。 无论是RESTful API还是Websocket,Python Flask和Vue的结合都可以实现数据的双向传输,增加应用的交互性。通过合理地设计API接口和数据模型,以及处理异常情况和安全问题等,能够实现高效、可靠、安全的Web应用。同时,线上服务的稳定性、运行效率、性能调优等也需要关注和优化。 ### 回答3: Python Flask与Vue前端交互是很常见的场景,它们可以在web应用程序中一起使用,提供了优秀的用户体验。Python Flask是一个基于Python语言的Web框架,Vue是一种现代的JavaScript框架,用于构建交互式的用户界面。 在使用Python Flask和Vue前端进行交互时,我们需要实现一个RESTful API,通过这个API来实现后端和前端之间的通信。具体实现步骤如下: 1. 在Python Flask中创建RESTful API Flask提供了一个Flask-RESTful扩展,它可以帮助我们更方便地创建RESTful API。我们可以通过使用该扩展,以类的形式定义资源,然后设置路由和HTTP方法,从而创建API。在这里,我们需要在Python Flask中定义API路由,并处理前端发送过来的请求。 例如,在Flask中,我们可以使用类似以下代码来创建一个RESTful API: ``` from flask_restful import Resource,Api app = Flask(__name__) api = Api(app) class Hello(Resource): def get(self): return {'hello': 'world'} api.add_resource(Hello, '/api/hello') ``` 上述代码将会创建一个API,并使用Hello类来处理GET请求。当前端发送GET请求时,将会返回‘hello:world’。 2. 在Vue中使用axios发送请求 在Vue中发送HTTP请求的常用方式是使用axios库。它可以轻松地对后端API进行调用。我们可以在Vue中编写一个方法来发送请求,并将其与我们的模板代码绑定。在这里,我们使用axios库发送GET请求获取后端API响应。 例如,在Vue中,我们可以添加以下代码来发送请求: ``` import axios from 'axios' Vue.component('hello',{ template: `<div>{{ hello }}</div>`, data(){ return { hello: '' } }, mounted(){ axios.get('/api/hello') .then(response => { this.hello = response.data.hello }) } }) ``` 上述代码将会向后端API发送GET请求,并将后端返回的数据渲染到模板中。 3. 在Vue中使用API 我们可以通过在Vue组件中引用后端API的URL,以HTTP请求的方式与后端API进行交互。在这里,我们可以在Vue组件中定义一个data对象,并在其中定义一个属性来保存我们的API返回结果。 例如,在Vue中,我们可以添加以下代码来定义一个组件: ``` <template> <div>{{ hello }}</div> </template> <script> export default { data() { return { hello: '', } }, mounted() { fetch('/api/hello') .then(response => response.json()) .then(data => this.hello = data.hello) }, } </script> ``` 上述代码将会从后端API获取数据,并将其渲染到组件中。 总结 Python Flask和Vue前端的结合为web应用程序提供了很好的用户体验。通过使用RESTful API,我们可以轻松地在Python和Vue之间进行通信,实现数据的相互传递和交互。在Vue中使用axios库来发送请求,然后在组件中使用数据,可以轻松地与后端API通信。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值