移动Web前端,游客点击商品的收藏按钮,登录完成,回来之后,如何自动收藏
2019-08-05

我们都知道,移动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的时效性,那就更安全了。

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