vue+flask完成登录验证和session的使用

使用vue判断验证用户登录状态

  • 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等。

  • 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向。

  • 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态。也可以结合sessionStorage 和localStorage使用,原理相同。

  • vue中提供了三种钩子(全局钩子,路由钩子,组件内钩子),两种函数:

    • 1.Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/
    • 2.Vue.afterEach(function(to,form))/在跳转之后判断/
  • Vue.beforeEach参数:
    1.to
    to为向后走的路由对象,也是即将进入的路由对象。包括路由的完整信息
    2.from
    from为从哪跳来的路由对象
    3.next()
    next()控制路由向下走,重新定义路由跳转的路由next(‘路由路径)

以上内容为转载+自己写的部分
原文:https://blog.csdn.net/Aimee1608/article/details/79963511

附加小知识:
sessionStorage (session)中的数据,这些数据只有在同一个会话中的页面才能访问
并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储,仅
仅是会话级别的存储。而 localStorage 用于持久化的本地存储,除非主动删除数据,否则
数据是永远不会过期的。

在本案例中我采用了sessionStorage的方式(为啥要用这种方式?顺眼呗0.0)

在vue创建的项目中的main.js中加入以下代码

业务逻辑:

模拟从登录页login跳转进入首页index或者其他页面
在登录页输入进行登录验证:如果输入的账号密码正确(是否存在于后台数据库),则将登录账号作为sessionStorage的值。在路由跳珠前查验是否有sessionStorage,如果存在,则进行跳转next(),在本次会话中则可以通过输入http://127.0.0.1:3000/index跳转到首页或者其他页面,否则路由还停留在登录页/login

1.前台 login页面登录执行的方法

//用到了vue的element组件库,使用fetch解决了vue前台服务器和数据库后台服务器的跨域问题
submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // 后台的验证
        fetch("/api/login",{
          method:"post",
          headers:{
            'content-type':'application/x-www-form-urlencoded'
          },
          body:`name=${this.numberValidateForm.name}&pass=${this.numberValidateForm.pass}`
        }).then((r) => {
          return r.json()  //
        }).then((data) => {
          if (data.status == 'ok'){
              sessionStorage.setItem('accessToken',data.session)
              this.$router.push({name:'indexPage'})
          }else{
              this.$message.error(data.info);
              return false;
          }
        })
      });
    }
    //numberValidateForm是vue中data数据,里面存放的是用户输入的name和password

2.后台python基于flask

def Admin_query(username,password):
    res = session.query(Admins).filter(Admins.username==username).filter(Admins.password==password).first()
    if res is not None:
        return res
        
@app.route('/api/login',methods=['POST'])
def login():
    username = request.form.get('name',None)
    passwprd = request.form.get('pass', None)
    if Admin_query(username,passwprd) is not None:
        print('ok')
        curr_user = User()
        curr_user.id = username
        # 生成登录后的session
        login_user(curr_user)
        return jsonify({'status':'ok','info':'%s登录成功'%username,'session':username})
    return jsonify({'status':'no','info':'登录失败'})
  1. 在全局入口文件main.js写的,确保每个路由在执行的时候都会经过验证
Vue.config.productionTip = false
	//开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没
	//有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是
	//可以避免的。(摘于官网说明) 大概意思应该就是,消息提示的环境配置,设置为开发环境或者生产环境
router.beforeEach((to,from,next) => {
	// 如果即将进入的路由对象是登录页,则进行跳转,否则验证是否携带accessToken,如果有,则进
	// 行跳转,没有,则不允许跳转
    if(to.path === "/login"){
        next()
    }else{
        if (sessionStorage.getItem('accessToken')){
            next()
        } else {
            next("/login")
        }
    }
})

vue+flask完成登录验证和session的使用_第1张图片
vue+flask完成登录验证和session的使用_第2张图片
fetch api
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

你可能感兴趣的:(Vue,flask)