zoukankan      html  css  js  c++  java
  • 移动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的时效性,那就更安全了。

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

  • 相关阅读:
    lighting
    移动端
    SVN常见问题
    前四章知识点小结
    如何不运用第三方变量实现两个数的交换
    awk
    sort
    cut
    sed
    30道Linux面试题
  • 原文地址:https://www.cnblogs.com/qianguyihao/p/9341171.html
Copyright © 2011-2022 走看看