JS+PHP實(shí)現(xiàn)登錄后自動(dòng)執(zhí)行之前的操作

Eirunye 發(fā)布于2019-08-22 10:43 / 2193人閱讀

摘要：執(zhí)行操作前判斷用戶的登錄狀態(tài)，是則執(zhí)行操作，否則先跳轉(zhuǎn)到登錄頁(yè)面，登錄成功后返回頁(yè)面，頁(yè)面繼續(xù)執(zhí)行之前的操作。進(jìn)入登錄頁(yè)時(shí)獲得的必須要記錄下來(lái)，才能在登錄成功后跳轉(zhuǎn)回之前的頁(yè)面。最后決定選擇保存要執(zhí)行的方法。

問(wèn)題

用戶進(jìn)入頁(yè)面A，在頁(yè)面A上要執(zhí)行一個(gè)操作X。操作X需要用戶登錄后才能訪問(wèn)，因此系統(tǒng)引導(dǎo)用戶到登錄頁(yè)，用戶登錄后在讓用戶繼續(xù)執(zhí)行操作X。

分析

操作X存在兩種情況，1:跳轉(zhuǎn)到一個(gè)頁(yè)面B；2:執(zhí)行一個(gè)操作。

進(jìn)入頁(yè)面B的情況，要在頁(yè)面B的入口位置判斷是否用戶是否為登錄狀態(tài)，是則進(jìn)入，否則進(jìn)入登錄頁(yè)面，登錄成功后再進(jìn)入頁(yè)面B。假設(shè)頁(yè)面A的URL是是url-a，頁(yè)面B的url是url-b，登錄頁(yè)面的url是url-l，那么瀏覽器的地址依次是url-a，url-b，url-l，url-b。因此，系統(tǒng)就是要解決登錄模版如何記錄url-b，并在成功后進(jìn)入url-b。

執(zhí)行一個(gè)操作的情況。執(zhí)行操作前判斷用戶的登錄狀態(tài)，是則執(zhí)行操作，否則先跳轉(zhuǎn)到登錄頁(yè)面，登錄成功后返回頁(yè)面A，頁(yè)面A繼續(xù)執(zhí)行之前的操作。這時(shí)，登錄頁(yè)要記錄頁(yè)面A，登錄成功后返回A，頁(yè)面A要記錄用戶的操作和參數(shù)，從登錄頁(yè)返回后繼續(xù)執(zhí)行。

實(shí)現(xiàn) 頁(yè)面跳轉(zhuǎn)

頁(yè)面跳轉(zhuǎn)的情況，由頁(yè)面B負(fù)責(zé)判斷是否要跳轉(zhuǎn)到登錄頁(yè)，如果需要用redirect的方式完成。

header("Location: $loginURL");
exit;

在login頁(yè)面需要知道是從哪個(gè)頁(yè)面跳轉(zhuǎn)來(lái)，并保存，這樣登錄成功后再跳轉(zhuǎn)回原來(lái)的頁(yè)面。PHP中可以通過(guò)$_SERVER["HTTP_REFERER"]獲得是從哪個(gè)頁(yè)面進(jìn)入的的登錄頁(yè)。

$referer = $_SERVER["HTTP_REFERER"];

進(jìn)入登錄頁(yè)時(shí)獲得的$referer必須要記錄下來(lái)，才能在登錄成功后跳轉(zhuǎn)回之前的頁(yè)面?？缯{(diào)用保存信息有4種方式：1、保存在session中；2、保存在cookie中；3、作為參數(shù)放在url中；4、生成頁(yè)面時(shí)，作為頁(yè)面的隱藏信息。

放在session中，只能通過(guò)php獲取，因此，登錄成功后跳轉(zhuǎn)回原頁(yè)面的操作只能在php中進(jìn)行，這樣就不能實(shí)現(xiàn)通過(guò)一個(gè)ajax調(diào)用驗(yàn)證用戶登錄信息后，在前端頁(yè)面直接跳轉(zhuǎn)指定頁(yè)面。

采用cookie的方式需要前后端共同確定一個(gè)約定，用什么代表頁(yè)面的跳轉(zhuǎn)信息，另外前端需要增加cookie的處理邏輯。這種方式可以同時(shí)支持前端或后端進(jìn)行跳轉(zhuǎn)。

作為參數(shù)放在url中可以實(shí)現(xiàn)在前端進(jìn)行跳轉(zhuǎn)，但是會(huì)導(dǎo)致url看起來(lái)有些怪異，同時(shí)還需要考慮url編碼的問(wèn)題。

直接生成在登錄頁(yè)面中（利用頁(yè)面模版）作為前端參數(shù)，這種方式支持在前端進(jìn)行跳轉(zhuǎn)，需要前后端約定參數(shù)的定義。

執(zhí)行操作

執(zhí)行操作的情況應(yīng)該是頁(yè)面A判斷用戶是否已經(jīng)登錄，或者根據(jù)執(zhí)行操作X的返回結(jié)果，由頁(yè)面A直接跳轉(zhuǎn)到登錄頁(yè)面，登錄界面記錄是從哪個(gè)頁(yè)面跳轉(zhuǎn)來(lái)的。

header("Location: $loginURL");
exit;

頁(yè)面A執(zhí)行跳轉(zhuǎn)到登錄頁(yè)面前，首先記錄要執(zhí)行的操作，例如：操作的名稱，這個(gè)信息必須可以跨請(qǐng)求訪問(wèn)。操作的相關(guān)信息可以通過(guò)url、session、cookie傳遞，或者通過(guò)localStorage、sessionStorage保留在客戶端。

如果用url指定要執(zhí)行的操作（用history.pushState替換url），只能攜帶簡(jiǎn)單的參數(shù)（放在history中是個(gè)好方法？沒(méi)想明白），通用性不好。session和cookie需要向服務(wù)器端傳數(shù)據(jù)，而且獲取保留的參數(shù)并不方便。最后決定選擇sessionStorage保存要執(zhí)行的方法。

跳轉(zhuǎn)到登錄界面前保存要執(zhí)行的操作：

if (window.sessionStorage) {
    var method = JSON.stringify({
        name: "要執(zhí)行的方法的名稱",
        args: [參數(shù)1,參數(shù)2]
    });
    window.sessionStorage.setItem("pending.method", method);
}

從登錄界面跳轉(zhuǎn)回頁(yè)面，取出要執(zhí)行的操作并執(zhí)行：

if (window.sessionStorage) {
    var pendingMethod;
    if (pendingMethod = window.sessionStorage.getItem("pending.method")) {
        window.sessionStorage.removeItem("pending.method");
        pendingMethod = JSON.parse(pendingMethod);
        window[pendingMethod.name].apply($scope, pendingMethod.args || []);
    }
}

總結(jié)，采用的方式是通過(guò)HTTP_REFERER和cookie記錄登錄后要跳轉(zhuǎn)的頁(yè)面，通過(guò)sessionStorage記錄返回頁(yè)面后要執(zhí)行的javascript方法和參數(shù)。