您的当前位置:首页Vue和Flask实现简单的登录验证跳转
广告

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

2023-11-30 来源:吉希宠物网
本文主要介绍了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><p 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></p><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, jsonifyapp = 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项目中实现token验证大致思路如下:

简单举例说明:

① 调登录接口成功,在回调函数中将token存储到localStorage和vuex中(login.vue中)

② store文件夹下的index.js

③ 路由守卫(router文件夹下的index.js)

④ 请求头加token

⑤ 如果前端拿到状态码为401,就清除token信息并跳转到登录页面

流程图:

Vue项目中用户登录及token验证及流程图

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

简单举例说明:

① 调登录接口成功,在回调函数中将token存储到localStorage和vuex中(login.vue中)

② store文件夹下的index.js

③ 路由守卫(router文件夹下的index.js)

④ 请求头加token

⑤ 如果前端拿到状态码为401,就清除token信息并跳转到登录页面

流程图:

vue实现登陆注册功能(小白篇)

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

vue-cli搭建一个项目,简单说明前端要做的事:

一、调登录接口成功,在回调函数中将token存储到localStorage和vuex中

login.vue

<template>

  <div>

    <input type="text" v-model="loginForm.username" placeholder="用户名"/>

    <input type="text" v-model="loginForm.password" placeholder="密码"/>

    <button @click="login">登录</button>

  </div>

</template>

<script>

import { mapMutations } from 'vuex';

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    };

  },

  methods: {

    ...mapMutations(['changeLogin']),

    login () {

      let _this = this;

      if (this.loginForm.username === '' || this.loginForm.password === '') {

        alert('账号或密码不能为空');

      } else {

        this.axios({

          method: 'post',

          url: '/user/login',

          data: _this.loginForm

        }).then(res => {

          console.log(res.data);

          _this.userToken = 'Bearer ' + res.data.data.body.token;

          // 将用户token保存到vuex中

          _this.changeLogin({ Authorization: _this.userToken });

          _this.$router.push('/home');

          alert('登陆成功');

        }).catch(error => {

          alert('账号或密码错误');

          console.log(error);

        });

      }

    }

  }

}

</script>

store文件夹下的index.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({

  state: {

    // 存储token

    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''

  },

  mutations: {

    // 修改token,并将token存入localStorage

    changeLogin (state, user) {

      state.Authorization = user.Authorization;

      localStorage.setItem('Authorization', user.Authorization);

    }

  }

});

export default store;

二、路由导航守卫

 router文件夹下的index.js

import Vue from 'vue';

import Router from 'vue-router';

import login from '@/components/login';

import home from '@/components/home';

Vue.use(Router);

const router = new Router({

  routes: [

    {

      path: '/',

      redirect: '/login'

    },

    {

      path: '/login',

      name: 'login',

      component: login

    },

    {

      path: '/home',

      name: 'home',

      component: home

    }

  ]

});

// 导航守卫

// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆

router.beforeEach((to, from, next) => {

  if (to.path === '/login') {

    next();

  } else {

    let token = localStorage.getItem('Authorization');

    if (token === 'null' || token === '') {

      next('/login');

    } else {

      next();

    }

  }

});

export default router;

三、请求头加token

// 添加请求*,在请求头中加token

axios.interceptors.request.use(

  config => {

    if (localStorage.getItem('Authorization')) {

      config.headers.Authorization = localStorage.getItem('Authorization');

    }

    return config;

  },

  error => {

    return Promise.reject(error);

  });

四、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

        localStorage.removeItem('Authorization');

        this.$router.push('/login');

vue实现登陆注册功能(小白篇)

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

vue-cli搭建一个项目,简单说明前端要做的事:

一、调登录接口成功,在回调函数中将token存储到localStorage和vuex中

login.vue

<template>

  <div>

    <input type="text" v-model="loginForm.username" placeholder="用户名"/>

    <input type="text" v-model="loginForm.password" placeholder="密码"/>

    <button @click="login">登录</button>

  </div>

</template>

<script>

import { mapMutations } from 'vuex';

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    };

  },

  methods: {

    ...mapMutations(['changeLogin']),

    login () {

      let _this = this;

      if (this.loginForm.username === '' || this.loginForm.password === '') {

        alert('账号或密码不能为空');

      } else {

        this.axios({

          method: 'post',

          url: '/user/login',

          data: _this.loginForm

        }).then(res => {

          console.log(res.data);

          _this.userToken = 'Bearer ' + res.data.data.body.token;

          // 将用户token保存到vuex中

          _this.changeLogin({ Authorization: _this.userToken });

          _this.$router.push('/home');

          alert('登陆成功');

        }).catch(error => {

          alert('账号或密码错误');

          console.log(error);

        });

      }

    }

  }

}

</script>

store文件夹下的index.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({

  state: {

    // 存储token

    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''

  },

  mutations: {

    // 修改token,并将token存入localStorage

    changeLogin (state, user) {

      state.Authorization = user.Authorization;

      localStorage.setItem('Authorization', user.Authorization);

    }

  }

});

export default store;

二、路由导航守卫

 router文件夹下的index.js

import Vue from 'vue';

import Router from 'vue-router';

import login from '@/components/login';

import home from '@/components/home';

Vue.use(Router);

const router = new Router({

  routes: [

    {

      path: '/',

      redirect: '/login'

    },

    {

      path: '/login',

      name: 'login',

      component: login

    },

    {

      path: '/home',

      name: 'home',

      component: home

    }

  ]

});

// 导航守卫

// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆

router.beforeEach((to, from, next) => {

  if (to.path === '/login') {

    next();

  } else {

    let token = localStorage.getItem('Authorization');

    if (token === 'null' || token === '') {

      next('/login');

    } else {

      next();

    }

  }

});

export default router;

三、请求头加token

// 添加请求*,在请求头中加token

axios.interceptors.request.use(

  config => {

    if (localStorage.getItem('Authorization')) {

      config.headers.Authorization = localStorage.getItem('Authorization');

    }

    return config;

  },

  error => {

    return Promise.reject(error);

  });

四、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

        localStorage.removeItem('Authorization');

        this.$router.push('/login');

VUE中从数据库拿到的数据怎么实现登录

如何使用Vue将从数据库中获取的数据用于实现登录?

在Vue中,我们经常需要从数据库中获取数据,用于解决前端工作中的各种需求。其中一个常见的需求是实现一个登录功能,这个功能需要从后台获取用户输入的用户名和密码,并进行验证,如果验证通过,则允许用户登录进入系统,否则将提示用户重新输入用户名和密码。下面,我们将介绍如何使用Vue从数据库中获取数据实现这个登录功能。

首先,我们需要在Vue组件中创建一个表单,用于让用户输入用户名和密码:

创建登录表单

在Vue中创建登录表单非常简单,只需要使用v-model指令绑定用户输入的值,并在表单中添加一个按钮来触发登录事件即可。

```html

用户名:

密码:

登录

export default {

data() {

return {

username: \"\",

password: \"\",

};

},

methods: {

login() {

// TODO: 登录操作

},

},

};

```

注意,这里我们使用了v-model指令来绑定用户输入的值,这使得我们可以很方便地获取到用户输入的内容,并将其用于后续的登录操作。

接下来,我们需要在Vue组件中实现登录功能。在这里,我们假设后台API已经实现了一个/login接口,该接口接收用户名和密码,并进行验证。如果验证通过,则返回一个JWT令牌,否则返回一个错误消息。我们需要使用Vue的axios库来向后台发送登录请求,并处理返回结果:

实现登录功能

实现登录功能需要使用到Vue的axios库,我们需要在Vue组件中导入该库,并使用它向后台发送登录请求。

```html

import axios from \"axios\";

export default {

data() {

return {

username: \"\",

password: \"\",

};

},

methods: {

async login() {

try {

const response = await axios.post(\"/login\", {

username: this.username,

password: this.password,

});

const token = response.data.token;

console.log(`登录成功,token=${token}`);

// TODO: 登录成功操作

} catch (error) {

console.error(`登录失败,错误消息=${error}`);

// TODO: 登录失败操作

}

},

},

};

```

注意,这里我们使用了async/await语法来实现异步登录请求,并使用try/catch语句块来处理异步请求的错误。如果登录请求成功,我们会得到一个包含JWT令牌的响应,我们可以将该令牌存储在本地,以便后续使用。

最后,我们需要在Vue组件中实现登录成功和失败时的操作。如果登录成功,我们可以将JWT令牌存储在浏览器的localStorage中,并跳转到系统首页。如果登录失败,则应该向用户显示一个错误消息,并提示其重新输入用户名和密码。下面是完整的Vue组件代码:

完整的Vue组件代码

下面是完整的Vue组件代码。注意,这里我们使用了vue-router库来进行页面跳转操作。

```html

用户名:

密码:

登录

import axios from \"axios\";

import router from \"@/router\";

export default {

data() {

return {

username: \"\",

password: \"\",

};

},

methods: {

async login() {

try {

const response = await axios.post(\"/login\", {

username: this.username,

password: this.password,

});

const token = response.data.token;

console.log(`登录成功,token=${token}`);

localStorage.setItem(\"token\", token);

router.push(\"/home\");

} catch (error) {

console.error(`登录失败,错误消息=${error}`);

alert(\"登录失败,请重新输入用户名和密码\");

this.username = \"\";

this.password = \"\";

}

},

},

};

```

在这个Vue组件中,我们成功实现了从数据库中获取数据,用于实现登录功能。通过使用v-model指令绑定表单元素的值,使用axios库向后台发送登录请求,并使用vue-router库进行页面跳转操作,我们成功地实现了一个基于Vue的登录功能。

如何实现登录界面并成功跳转到另一个界面?

在VisualStudio中实现登录界面并成功跳转到另一个界面的步骤如下:

1、创建一个窗体或页面来设计登录界面。可以使用VisualStudio的窗体设计器或XAML编辑器来设计界面的外观和布局。在登录界面上添加用户名和密码输入框,以及登录按钮。

2、在登录按钮的点击事件中,编写代码来验证用户输入的用户名和密码是否正确。可以将用户的登录凭据与预先存储的凭据进行比较,例如在数据库或配置文件中存储的用户名和密码。

3、在登录成功的处理代码中,使用导航功能将应用程序导航到另一个界面。这可以是另一个窗体、页面或导航视图。可以使用VisualStudio提供的导航工具或编程方式来实现页面之间的跳转。

4、在跳转到另一个界面之前,确保准备好所需的数据和状态。包括从数据库或其他数据源加载数据,设置界面的初始状态等。确保在跳转之前将所需的数据传递给目标界面。

5、根据选择的导航方法,使用适当的代码将应用程序导航到目标界面。这可能涉及创建新的窗体或页面实例,设置导航堆栈,或使用导航控件进行页面切换。

吉希宠物网还为您提供以下相关内容希望对您有帮助:

vue实现登陆注册功能(小白篇)

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面 4、前端每次跳转...

VUE中从数据库拿到的数据怎么实现登录

首先,我们需要在Vue组件中创建一个表单,用于让用户输入用户名和密码:创建登录表单 在Vue中创建登录表单非常简单,只需要使用v-model指令绑定用户输入的值,并在表单中添加一个按钮来触发登录事件即可。```html 用户名:密码...

Flask博客实战 - 实现登录注册功能

这个其实思路也非常简单,既然在实现模板中调用用户信息的时候,我们把当前登录的用户信息添加到了g对象,那么我们只需要判断g.user的返回值是否为None即可判断用户是否登陆!到这里关于用户登录注册相关的基本权限问题我们就完成了...

SpringBoot+Vue项目中实现登录验证码校验

第一步:在后端创建一个生成随机验证码的工具类和接收请求验证码的接口。工具类的主要作用生成随机验证码和对应的图片。接口的作用是将生成的随机验证码保存到session,同时,将图片进行base64编码,然后返回给前端。第二步:...

Vue-ele实战登录页完善,主页由导航展示,路由动态跳转

submitForm(formName) {       this.$refs[formName].validate((valid) =&gt; {         /* el-form组件的validate方法 在回调函数中,如果vaild为true,则表示表单验证...

html页面验证用户名和密码并且点击自己制作的登陆按钮跳转到另外一个...

(1)为按钮增加一个 click 的监听,当鼠标点击该按钮时执行;(2)获取 input 用户名和密码输入框的输入值;(3)验证输入值是否符合要求;(4)符合要求页面跳转到设置的指定页面;(5)不符合要求提示用户输入错误。4、...

flask-admin怎么做登录认证

右上角加了管理员登录 不过网页默认显示全是英文,需要汉化处理,Flask-Admin...更多可定制选项见flask_admin.model文档 用Flask-Login做身份验证

怎么用flask+mysql来实现一个简单的用户注册和登陆效果的页面

用flask+mysql实现用户的注册和登录:一个简单的用户注册和登录的页面,就两个部分。涉及到数据库,存储用户数据(注册),读出用户数据(登录验证)。搞清楚如何用python连接和操作数据库即可,还有了解sql数据库语句,sqlite和...

php文件如何接受vue前端axios传过来的参数实现登录验证?

前端请求要么GET要么POST。你在php里面获取的话可以使用超全局变量: $_GET/$_POST。根据对应的请求方式可以直接获取到所有的请求数据。

Vue与Flask的关联

编译完成后,我们会在vue文件夹下得到dist文件夹(上上图中输出目录的设置),里面放置的就是编译好的前端文件。此时需要打开app.py文件(第一节中创建的小应用),修改如下:然后在运行Flask:现在访问 http://127.0.0...

Top