前端登入請求概況

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中的刪除掉，把本地的也一併刪除