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

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

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

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

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

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

然后我就開(kāi)始扒文檔+百度;
找到 $.ajaxSetup 這方法 代碼貼下
百度搜也有一篇比較好的文章寫(xiě)的比較詳細(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ǔ)充下這文章沒(méi)說(shuō)到的,也可能只有我一個(gè)人遇到這問(wèn)題..
$.ajaxSetup 這方法不是success之前觸發(fā)的..
是在success里的邏輯觸發(fā)完才會(huì)觸發(fā) 這個(gè)方法
我遇到的問(wèn)題就是 如果token失效 success里的處理函數(shù)就要會(huì)報(bào)錯(cuò),因?yàn)楂@取數(shù)據(jù)完之后我沒(méi)加if判斷
來(lái)校驗(yàn)獲取的數(shù)據(jù)是否是正確,當(dāng) success 里的處理函數(shù)報(bào)錯(cuò)時(shí),就會(huì)直接拋出錯(cuò)誤,不執(zhí)行后面的方法,
這坑,我找了蠻久的,可能是因?yàn)椴?/p>

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

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