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

紀(jì)錄下前幾天遇到的問題

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

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

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

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

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

文章

    $.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);   
               }
        }
    })

補(bǔ)充下這文章沒說到的,也可能只有我一個人遇到這問題..
$.ajaxSetup 這方法不是success之前觸發(fā)的..
是在success里的邏輯觸發(fā)完才會觸發(fā) 這個方法
我遇到的問題就是 如果token失效 success里的處理函數(shù)就要會報錯,因?yàn)楂@取數(shù)據(jù)完之后我沒加if判斷
來校驗(yàn)獲取的數(shù)據(jù)是否是正確,當(dāng) success 里的處理函數(shù)報錯時,就會直接拋出錯誤,不執(zhí)行后面的方法,
這坑,我找了蠻久的,可能是因?yàn)椴?/p>

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

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