前端登錄功能過程概況

前端登錄請求概況

1，表單驗證

1. 完整的表單校驗需要三個組件完成配合 分別是el-form，el-form-item，表單項，如：el-input
   el-form負責綁定model 和 rules
   el-form-item負責綁定prop
   el-input 負責雙向綁定具體的表單數據

2. 簡單的校驗例如非空，長度等可以直接使用內置的校驗配置，如果校驗規則復雜建議使用校驗函數進行校驗。
   比如：我們的手機號比較復雜就使用更加靈活的校驗函數
   比如：密碼比較簡單我們直接使用內置的校驗配置即可

3. 手動兜底校驗

2，調用封裝好的接口函數

發送ajax請求

3，收集用戶參數，上傳給上一步的函數

獲取用戶參數，將參數上傳Ajax發送的函數

4，經過請求攔截器，添加請求頭

設置攔截器

// 響應攔截器
service.interceptors.response.use(response => {
  if (response.data.success) {
    // 操作成功
  } else {
    // 如果success為false 業務出錯,直接觸發reject 
    // 被catch分支捕獲
    return Promise.reject(new Error(response.data.message))
  }
}, error => {
  return Promise.reject(error) // 返回執行錯誤 讓當前的執行鏈跳出成功 直接進入 catch
})

5，代理轉發（vue.config.js）

為解決跨域問題，代理轉發

module.exports = {
  devServer: {
    // 代理配置
    proxy: {
        // 如果請求地址以/api打頭,就出觸發代理機制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我們要代理的真實接口地址
        }
      }
    }
  }

6，要求后端開啟服務器

7，經過響應攔截器處理

1. 判斷當前操作是否成功，決定是否axios報錯
2. 簡化獲取有效數據的寫法(脫殼)

8，得到接口調用之后結果

9，保存token到vuex

使用vuex的基本邏輯：數據放在state中，要修改數據則調用mutations

1. 先在state中補充定義token
2. 同時，要提供對應的用來修改token的mutation，以方便在用戶登陸成功之后，去設置token

10，token做持久化

1. 在對token進行初始化的時候先從本地取一下，優先使用本地取到的值
2. 在設置token的時候除了在vuex中存一份，在本地也同步存一份
3. 在刪除token的時候除了把vuex中的刪除掉，把本地的也一並刪除