摘要：紀錄下前幾天遇到的問題前幾天一個項目中寫了個登錄功能算是入行以來寫的第一個功能遇到幾個問題稍微記錄下簡單介紹這項目只調用了和還有一些插件我基本都是在寫原生的方法用的少運用保持用戶登錄狀態原理就不贅述了百度很多登錄發送賬號密碼給后端后端返回前

紀錄下前幾天遇到的問題

前幾天一個項目中寫了個登錄功能,算是入行以來寫的第一個功能,遇到幾個問題稍微記錄下

簡單介紹這項目,只調用了layui和jquery 還有一些插件,我基本都是在寫原生,jq的方法用的少

運用token保持用戶登錄狀態
token原理就不贅述了,百度很多,登錄發送賬號密碼給后端,后端返回token前端存儲到cookie或者本地存儲中,
在發送請求時,在請求頭中帶上token就可以,其實功能很簡單,但是遇到一點小問題,下面簡單說下
因為這項目與之前一個項目調用的同一個后端數據,之前的項目也有登錄功能第一個問題就是,
這兩項目同時打開時,新項目頁面cookie存儲的token會多一個
這問題我還是沒解決,最后在新項目用 window.sessionSorage 存儲token

判斷token失效,并且讓用戶重新登錄
token失效的話,接口會返回code:401,
所以這需求也很簡單,只要判斷接口返回code是否是401,一個if判斷就出來了,但是在項目里面有很多接口,而且還不是我一個人書寫,所以我就考慮ajax有沒有方法可以統一處理ajax的返回數據

然后我就開始扒文檔+百度;
找到 $.ajaxSetup 這方法 代碼貼下
百度搜也有一篇比較好的文章寫的比較詳細

文章

    $.ajaxSetup({
        complete: function(XMLHttpRequest, textStatus) {
             try {
                 var jsonData = JSON.parse(XMLHttpRequest.responseText)
                 if (jsonData.code === 401) {
                     window.location.href = "login.html";
                     sessionStorage.removeItem("token");
                   } else {
                   
                   }
               } catch (e) {
                console.log(e);   
               }
        }
    })

補充下這文章沒說到的,也可能只有我一個人遇到這問題..
$.ajaxSetup 這方法不是success之前觸發的..
是在success里的邏輯觸發完才會觸發 這個方法
我遇到的問題就是 如果token失效 success里的處理函數就要會報錯,因為獲取數據完之后我沒加if判斷
來校驗獲取的數據是否是正確,當 success 里的處理函數報錯時,就會直接拋出錯誤,不執行后面的方法,
這坑,我找了蠻久的,可能是因為菜

ajax的簡單封裝
關于ajax的封裝網上有很多,就不細說,我就貼下我自己的封裝方法,記錄下
就一個拼接請求的服務器地址,以后如果要等會服務器,就不用一個一個改
還有一個就是其你去頭帶上token
設置默認提交是josn 其實有點弊端,得后端配合 接口提交的參數都是json形式,而不是表單提交
我這里跟另外一個前端說話,如果是運用表單提交參數的話,就多帶帶設置請求頭,默認使用json提交參數

 $.ajaxSettings.beforeSend = function(xhr, obj) {
   obj.url = baseURL + obj.url;
   $.ajaxSettings.contentType = "application/json";
   xhr.setRequestHeader("token", sessionStorage.getItem("token"))
  };