Express專案中ajax請求session過期問題處理

Express專案中ajax請求session過期問題處理

在頁面中使用ajax方式非同步請求返回自定義code資訊是我們在開發中經常用到的，但是如果ajax請求後需要走攔截器判斷使用者登入身份是否失效呢？

正常的url請求我們可以在Express專案的app.user()中進行攔截，攔截成功後直接寫url的重定向，但是ajax請求我們就不能這樣寫了。

如下：直接判斷session，然後res.redirect即可。

app.use(function (req, res, next) {
    if (!req.session.user) {
        if (req.url == "/login") {
            next();
        }
        else {
            res.redirect('/login');
        }
    } else if (req.session.user) {
        res.locals.session = req.session;
        next();
    }
});

但是ajax請求就不行了，因為我們現在基本都是些type:json，那麼現有的app.use就不能實現提示效果了，我們可以進行改造，增加ajax請求判斷，我們都知道ajax請求的x-requested-with=XMLHttpRequest，所以就可以改造如下：

app.use(function (req, res, next) {
    if (!req.session.user) {
        //處理 ajax 請求 session 過期問題
        if (req.headers["x-requested-with"] != null
            && req.headers["x-requested-with"] == "XMLHttpRequest"
            && req.url != "/login") {
            return res.json({ret_code: 99, ret_msg: '登入資訊失效，請您重新登入'});
        }
        if (req.url == "/login") {
            next();
        }
        else {
            res.redirect('/login');
        }
    } else if (req.session.user) {
        res.locals.session = req.session;
        next();
    }
});

增加判斷後，ajax返回json狀態碼，在我們頁面的ajax請求處理即可，那麼問題又來了，需要每個頁面的每個ajax方法去處理下？豈不是要瘋了？當然不是，這就要用到$.ajaxSetup方法了，程式碼如下：

/**
 * Created by pangshunlong on 2017/3/31.
 */
/**
 * 設定未來(全域性)的AJAX請求預設選項
 * 主要設定了AJAX請求遇到Session過期的情況
 */
$.ajaxSetup({
    complete: function (data) {
        if (data.responseJSON.ret_code && data.responseJSON.ret_code == 99) {
            layer.msg(data.responseJSON.ret_msg, {icon: 5});
            var top = getTopWinow();
            setTimeout('top.location.href = "/login";', 1500);
        }
    }
});

/**
 * 在頁面中任何巢狀層次的視窗中獲取頂層視窗
 * @return 當前頁面的頂層視窗物件
 */
function getTopWinow() {
    var p = window;
    while (p != p.parent) {
        p = p.parent;
    }
    return p;
}

都引用下這個js檔案即可實現所有頁面的ajax在session失效後的提示和跳轉登入頁面啦~

如果誰有更好的方法請賜教~

由龐順龍最後編輯於：3年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。