Vue+Flask实现简单的登录验证跳转的示例代码

本文介绍了Vue+Flask实现简单的登录验证跳转，分享给大家，具体如下:

文件位置：

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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue登录注册及token验证实现代码
  • vue登录路由验证的实现
  • Vue实战之vue登录验证的实现代码
赞 (0)

相关推荐

  • Vue实战之vue登录验证的实现代码

    最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手--好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)--- 我做的这个产品是课堂在线编程教学工具,由于涉及到商业问题,这里就不能和大家分享了,但是我可以把里面我认为很牛(zhuang)X(bi)的技术和大家分享分享啊. 如果你觉得我写的很 low的话欢迎加入igeekbar裙里来喷我啊,我在那里等你

  • vue登录路由验证的实现

    vue登录路由验证的实现

    vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了.可以将登录的状态写到web Storage中进行存储管理. 步骤如下: 1.在登录组件里,将登录状态写入web Storage里.(一般写入session Storage,会话关闭,存储数据自动删除) if('登录成功') {sessionStorage.setItem('accessToken' , 写入登录成功返回的登录令牌或者自定义的判断字符串) } 2.在需要登录验证的路由元

  • vue登录注册及token验证实现代码

    在大多数网站中,实现登录注册都是结合本地存储cookie.localStorage和请求时验证token等技术.而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框. 而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为. 具体实现代码如下: 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from 'v

  • Vue+Flask实现简单的登录验证跳转的示例代码

    Vue+Flask实现简单的登录验证跳转的示例代码

    本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下: 文件位置: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <script type="text/javascript" src="../sta

  • ASP.NET Core中实现用户登录验证的最低配置示例代码

    前言 本文主要给大家介绍了关于ASP.NET Core用户登录验证的最低配置的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 背景是在一个项目中增加临时登录功能,只需验证用户是否登录即可,所需的最低配置与实现代码如下. 方法如下: 在 Startup 的 ConfigureServices() 方法中添加 Authentication 的配置: services.AddAuthentication(options => { options.DefaultAuthenti

  • SpringMVC拦截器——实现登录验证拦截器的示例代码

    本例实现登陆时的验证拦截,采用SpringMVC拦截器来实现 当用户点击到网站主页时要进行拦截,用户登录了才能进入网站主页,否则进入登陆页面 核心代码 首先是index.jsp,显示链接 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String bas

  • django 简单实现登录验证给你

    这篇文章主要介绍了django 简单实现登录验证给你,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在网站开发过程中,经常会遇到这样的需求: 用户登陆系统才可以访问某些页面,如果用户没有登陆而直接访问就会跳转到登陆界面,用户在跳转的登陆界面中完成登陆后,自动访问跳转到之前访问的地址 要实现这样的需求其实很简单:就是使用@login_required标签. 1. 在相应的view方法的前面添加@login_required标签, @login_r

  • Vue+Spring Boot简单用户登录(附Demo)

    1 概述 前后端分离的一个简单用户登录 Demo . 2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus 3 前端 3.1 创建工程 使用 vue-cli 创建,没安装的可以先安装: sudo cnpm install -g vue @vue/cli 查看版本: vue -V 出现版本就安装成功了. 创建初始工程: vue create bvdemo 由于目前 Vue3 还没有发布正式版本,推荐使用 Vue2 : 等待一段时间构建好了之后

  • 用JS实现简单的登录验证功能

    用JS实现简单的登录验证功能

    实现过程示意图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <style> .ok { color: green; border: 1px solid green; } .error { color: red; border: 1px solid red; } </style> <s

  • vue 实现在函数中触发路由跳转的示例

    如下所示: <span @click="clickFn">点我</span> methods:{ clickFn:function(){ this.$router.go('/login');//其中login是你定义的一个路由模块 } 以上这篇vue 实现在函数中触发路由跳转的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

  • 使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下所示: 有一张user表和留言表,关系为一对多,留言表有父留言字段的id,和自身有一个一对多的关系,建表语句如下: CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, `content` text

  • Vue+jquery实现表格指定列的文字收缩的示例代码

    Vue+jquery实现表格指定列的文字收缩的示例代码

    本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下: 效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列 代码是这样的: <el-table-column width="250" align="center" label="比较基准"> <templa

随机推荐