移動Web前端，遊客點選商品的收藏按鈕，登入完成，回來之後，如何自動收藏

千古壹號發表於2018-07-20
Web前端

我們都知道，移動Web端（M站環境下），很多時候，前端是無法判斷使用者的登入狀態的，因為出於安全性考慮，與賬號相關的cookie欄位一般都是 http-only的。

如果前端想判斷使用者的登入狀態，需要主動去調後臺介面，根據後臺介面返回的狀態碼來判斷。

那麼，我如果想實現下面這樣一個場景，該怎麼做呢？

移動Web端（M站環境下），遊客點選商品的收藏按鈕，登入完成，回來之後，如何自動收藏？

方式一：在url里加欄位

具體步驟如下：

（1）遊客點選收藏按鈕，立即呼叫favCommAdd的介面（假設這個是收藏商品的介面）。如果介面返回未登入，就往重定向的url中加欄位doFavor=true，然後去執行登入操作。比如：

var rurl = location.href + `&isLogin=true`
favCommAdd(skuId, rurl);  //呼叫介面。引數一表示，給指定的sku新增收藏。引數二用於登入成功後的回跳

上面的這個rurl引數指的是使用者登入成功後的回跳連結。

（2）頁面初始化的時候，做判斷：如果當前頁面的url中包含了doFavor=true欄位（代表使用者在上面的第一步中登入成功），就呼叫FavCommAdd的介面。收藏成功。

    var doFavor = url.getUrlParam(`doFavor`); //這一行是虛擬碼，用於獲取url中的指定引數
        if(doFavor&&doFavor == `true`){
            console.log(`登入成功了`);
            queryAskPermission();
        }

總結：方式一的這種做法存在csrf安全問題，如果我把當前頁面攜帶doFavor欄位的url連結轉發給別人（例如 smyhvae.com/item.shtml?sku=1234&doFavor=true），別人點進去之後，也會去呼叫FavCommAdd介面。

方式二：往cookie里加欄位

具體步驟如下：

方式二和方式一是類似的。只不過，這次，我們是在 cookie 里加欄位，而不是在 url 里加欄位。

具體步驟如下：

（1）遊客點選收藏按鈕，立即呼叫FavCommAdd的介面。如果介面返回未登入，就往 cookie 里加doFavor欄位，然後去執行登入操作。比如：

cookie.set(`dofav`,`ok`,1);   //這一行是虛擬碼，表示往cookie里加自定義的欄位

（2）頁面初始化的時候，做判斷：如果當前頁面的cookie中包含了doFavor欄位（代表使用者在上面的第一步中登入成功），就呼叫FavCommAdd的介面，同時刪除這個cookie欄位。收藏成功。比如：

        if (cookie.get(`dofav`)){  //這一行是虛擬碼，表示獲取指定的cookie欄位
            cookie.del(`dofav`);
            obj.fav();
        }

總結：

方式二比方式一更安全，如果把連結轉發給他人，他人那裡並未檢測出cookie裡的指定欄位，自然也就無法呼叫FavCommAdd 介面。

但是，方式二依然避免不了csrf攻擊（比如說，當黑客往cookie裡寫入欄位的時候）。但總的來說，方式二還算比較通用。

當然，我們還可以在方式二的基礎之上，往cookie中的欄位中加md5碼，並且要保證這個md5的時效性，那就更安全了。

如果還有其他更安全、更嚴謹的方式，歡迎交流。

相關文章