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

如果还有其他更安全、更严谨的方式，欢迎交流。