检查登录添加到收藏夹按钮

Question

I am trying to implement "to favourite" feature for my website.

User can visit whole website without login, but if they want to mark their favourite out of some results they need to login.

I'm clear with the login of add to favourite feature, now only problem is, as I said user don't need to login when they land on website but if they clicked on an "add to favourite" button it should check for login status (I know they are not logged in initially) then bootstrap modal should appear with social login (real problem).

So how I could present login page in modal if he is not logged in?

My code is:

<button  class='btn btn-sm btn-info favourite_feature' value="<?php echo $id;?>">favourite</button>  

$(document).ready(function()
{
  $(".favourite_feature").click(function(){
    var _this = $(this);
    var postid = _this.val();
    $.ajax({
      type     : 'POST',
      url      : '/add_favourite.php',
      dataType : 'json',
      data     : '$postid='+ postid,
    });
  });
});

Answer 1

Basically it's your back-end's responsibility to check whether the user is logged in or not, when receiving a request for "add to favourite" action.

When JS posts data to the server, it should respond accordingly (whether the operation was successful or not and what was the problem).

Suppose the backend "add to favourite" action responds with this json, when user is not logged in:

{
  "success" : 0,
  "error_type" : "login"
}

... and this json when action was performed with no errors:

{
   "success" : 1
}

That way your server informs JavaScript that the user should log in. Then you can handle above response accordingly (in my example the element with id loginModal is the modal to show):

$(document).ready(function()
{
  $(".favourite_feature").click(function(){
    var _this = $(this);
    var postid = _this.val();
    $.ajax({
      type     : 'POST',
      url      : '/add_favourite.php',
      dataType : 'json',
      data     : '$postid='+ postid,
      success  : function(response) {
         if (response.success) {
            // if add to favourite succeeded
         }
         else {
            // handle errors
            if (response.error_type == 'login') {
               // if user should log in - show modal (example jQuery)
               $('#loginModal').modal('show');
            }
         }
      }
    });
  });
});