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