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

EasonTyler 發(fā)布于2019-08-01 15:59 / 604人閱讀

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

問題

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

分析

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

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

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

實現(xiàn) 頁面跳轉(zhuǎn)

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

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

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

$referer = $_SERVER["HTTP_REFERER"];

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

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

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

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

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

執(zhí)行操作

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

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

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

如果用url指定要執(zhí)行的操作（用history.pushState替換url），只能攜帶簡單的參數(shù)（放在history中是個好方法？沒想明白），通用性不好。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)回頁面，取出要執(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é)，采用的方式是通過HTTP_REFERER和cookie記錄登錄后要跳轉(zhuǎn)的頁面，通過sessionStorage記錄返回頁面后要執(zhí)行的javascript方法和參數(shù)。