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':'登录失败'})

3. 在全局入口文件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")
        }
    }
})

fetch api
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch