移動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的時效性，那就更安全了。

若是還有其餘更安全、更嚴謹的方式，歡迎交流。