Vue+Flask实现简单的登录验证跳转

本文介绍了一个简单的登录系统的实现过程,前端采用Vue.js进行界面开发,并使用Axios进行HTTP请求,后端则使用Python Flask框架进行开发。文章详细展示了如何从前端收集用户输入并发送给后端,以及后端如何验证这些信息并返回相应的响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文件位置: 输入图片说明

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>

    <script type="text/javascript" src="../static/vue.js"></script>
    <script type="text/javascript" src="../static/axios.js"></script>

</head>
<body>

<div id="login">
    <form action="#" novalidate>
        <label for="username">Username</label>
        <input type="text" name="username" id="username" placeholder="Enter your Name" v-model="username"><br>
        <label for="password">Password</label>
        <input type="text" name="password" id="password" placeholder="Enter your Password" v-model="password"><br>
        <br>

        <button type="button" v-on:click="login">Apply</button>
    </form>
</div>


<script type="text/javascript">
    var login = new Vue({
        el: '#login',
        data:{
            username: '',
            password: ''
        },
        methods: {
            login: function () {
               axios.post('http://127.0.0.1:5000/login',{
                   username: this.username,
                   password: this.password
               }).then(function (response) {
                   console.log(response.status)
                   // 其实是应该走后台路由
                   if(parseInt(response.status) === 200){
                       window.location.href = 'index'
                   }
               }).catch(function (error) {
                   console.log(error.response)
               })

            }
        }
    })
</script>

</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <h1>Hello,This is Index Page!</h1>
</body>
</html>

Login.py

# -*- coding: utf-8 -*-

from flask import Flask, request, session, redirect, url_for, render_template, make_response, jsonify
app = Flask(__name__)


@app.route('/login', methods=('GET', 'POST'))
def login():
    if request.method == 'POST':
        session['username'] = request.json.get('username')
        session['password'] = request.json.get('password')
        # 登录成功,则跳转到index页面
        return jsonify({'code': 200, 'token': "123456"})
    # 登录失败,跳转到当前登录页面
    return render_template('login.html')


@app.route('/index')
def index():
    # 如果用户名和密码都存在,则跳转到index页面,登录成功
    if 'username' in session and 'password' in session:
        return render_template('index.html')
    # 否则,跳转到login页面
    return redirect(url_for('login'))


@app.route('/logout')
def logout():
    session.pop('username', None)
    session.pop('password', None)
    return redirect(url_for('login'))


# set the secret key.  keep this really secret:
app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'


if __name__ == '__main__':
    app.run(debug=True)


转载于:https://my.oschina.net/yj1993/blog/1580499

<think>好的,用户想用FlaskVue实现用户登录和注册功能,需要教程或示例代码。我需要结合之前的引用内容来回答。首先,用户提到了三个引用,都是关于FlaskVue登录注册实现。引用1详细说明了注册的后端处理,包括检查用户是否存在和数据库操作。引用2提到了JWT验证和前后端交互流程。引用3则涉及前端存储数据的方法,比如sessionStorage。接下来,我需要分步骤讲解实现过程。首先是后端部分,用户可能需要Flask的路由处理,比如注册和登录接口。注册时需要检查用户名是否重复,使用User.query.filter_by,这部分在引用1里有示例代码。登录的话,需要验证密码,生成JWTtoken,如引用2所述,用JWT加密用户信息并返回给前端。然后是前端Vue部分,需要处理表单提交,发送POST请求到后端。引用2和3提到了前端存储token的方法,可以使用localStorage或sessionStorage,这里需要说明如何在Vue实现。比如使用axios发送请求,处理响应,保存token,并跳转页面。另外,需要考虑跨域问题,因为FlaskVue可能运行在不同端口,需要配置CORS。这在引用1的代码中可能有体现,比如使用flask_cors模块。 还要提到JWT的验证机制,前端在每次请求时需要携带token,后端验证token的有效性。这部分引用2有详细思路,可以引用说明。 最后,安全问题,比如密码加密存储。在引用1的代码中,用户密码是直接保存的,但实际应该使用哈希处理,比如使用werkzeug的generate_password_hash和check_password_hash,这点需要补充提醒用户。可能用户还关心前后端分离的具体配置,比如Vue的路由设置,导航守卫判断登录状态,这部分可以结合引用2和3的内容,给出示例代码。需要确保步骤清晰,分后端和前端两部分,每部分给出关键代码示例,并解释各部分的作用。同时,引用相关的引用内容来支持说明,比如数据库操作引用1,JWT处理引用2,前端存储引用3。生成的问题应该围绕实现中的关键点,比如跨域处理、密码加密、JWT验证机制和前端路由保护,这些都是用户可能遇到的后续问题。</think>### 分步骤实现Flask+Vue登录注册功能 #### 一、后端实现Flask) 1. **数据库模型定义** ```python from flask_sqlalchemy import SQLAlchemy db = SQLAlchemy() class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(80), unique=True) email = db.Column(db.String(120)) password = db.Column(db.String(200)) # 实际应存储哈希值[^1] ``` 2. **注册接口实现** ```python @app.route('/register', methods=["POST"]) def register(): username = request.json.get('username') password = request.json.get('password') # 检查用户名是否存在 if User.query.filter_by(username=username).first(): return jsonify({"code": 400, "msg": "用户名已存在"}) # 创建新用户(需添加密码哈希处理) new_user = User(username=username, password=password) db.session.add(new_user) db.session.commit() return jsonify({"code": 200, "msg": "注册成功"})[^1] ``` 3. **登录接口与JWT生成** ```python from flask_jwt_extended import create_access_token @app.route('/login', methods=["POST"]) def login(): username = request.json.get('username') password = request.json.get('password') user = User.query.filter_by(username=username).first() if user and user.password == password: # 实际应验证哈希值 access_token = create_access_token(identity=username) return jsonify({"token": access_token})[^2] return jsonify({"code": 401, "msg": "认证失败"}) ``` #### 二、前端实现Vue3) 1. **登录表单组件** ```vue <template> <form @submit.prevent="handleLogin"> <input v-model="username" placeholder="用户名"> <input v-model="password" type="password"> <button type="submit">登录</button> </form> </template> <script setup> import axios from 'axios'; const username = ref(''); const password = ref(''); const handleLogin = async () => { const res = await axios.post('http://localhost:5000/login', { username: username.value, password: password.value }); if (res.data.token) { localStorage.setItem('jwt_token', res.data.token);[^3] router.push('/dashboard'); } } </script> ``` 2. **请求拦截器(携带Token)** ```javascript axios.interceptors.request.use(config => { const token = localStorage.getItem('jwt_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); ``` #### 三、关键配置 1. **跨域处理(Flask)** ```python from flask_cors import CORS CORS(app, resources={r"/*": {"origins": "http://localhost:8080"}}) ``` 2. **JWT配置(Flask)** ```python app.config["JWT_SECRET_KEY"] = "your-secret-key" jwt = JWTManager(app) ``` ### 核心实现要点 1. **密码安全存储**:应使用`werkzeug.security.generate_password_hash`处理密码[^1] 2. **Token验证机制**:后端需添加中间件验证请求头中的JWT有效性[^2] 3. **前端路由保护**:通过Vue Router的导航守卫验证登录状态 ```javascript router.beforeEach((to) => { if (to.meta.requiresAuth && !localStorage.getItem('jwt_token')) { return '/login' } }) ``` ### 注意事项 1. **会话管理**:建议使用HttpOnly Cookie存储敏感信息 2. **输入验证**:需添加前端表单验证和后端参数校验 3. **错误处理**:统一处理网络请求异常情况
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值