WordPress主题开发中怎么在前端JS里判断用户是否登录？

在WordPress主题开发和插件开发中，通常使用PHP来判断用户是否登录，因为WordPress的核心功能是基于PHP实现的。然而，也有很多情景需要在前端JavaScript中判断用户是否登录，以下是实现这一功能的几种方法：

方法一：使用WordPress的全局变量，通过`wp_localize_script`传递登录状态

WordPress提供了wp_localize_script函数，可以在前端JavaScript中使用PHP传递用户登录状态。

步骤：

在WordPress主题的functions.php文件中添加代码：

   function pass_login_status_to_js() {
       wp_enqueue_script('custom-login-status', get_template_directory_uri() . '/js/custom.js', array(), null, true);

       $user_logged_in = is_user_logged_in() ? true : false;
       wp_localize_script('custom-login-status', 'loginStatus', array(
           'isLoggedIn' => $user_logged_in
       ));
   }
   add_action('wp_enqueue_scripts', 'pass_login_status_to_js');

在/js/custom.js文件中使用登录状态：

   document.addEventListener('DOMContentLoaded', function() {
       if (loginStatus.isLoggedIn) {
           console.log('用户已登录');
           // 用户已登录时的逻辑
       } else {
           console.log('用户未登录');
           // 用户未登录时的逻辑
       }
   });

原理：

wp_localize_script函数将PHP变量（如用户登录状态）传递到前端JavaScript中。
在前端JavaScript中，可以通过loginStatus.isLoggedIn来判断用户是否登录。

方法二：通过AJAX请求获取登录状态

如果不想在页面加载时传递登录状态，可以通过AJAX请求从后端获取。你可以通过AJAX向服务器发送请求，然后在服务器端用PHP函数is_user_logged_in()判断用户是否登录，并将结果返回给前端。

步骤：

在主题的functions.php文件中添加AJAX处理函数：

   add_action('wp_ajax_nopriv_check_user_login', 'check_user_login');
   add_action('wp_ajax_check_user_login', 'check_user_login');

   function check_user_login() {
      if (is_user_logged_in()) {
         wp_send_json_success(['isLoggedIn' => true]);
      } else {
         wp_send_json_error(['isLoggedIn' => false]);
      }
   }

在前端JavaScript中发起AJAX请求：

   function checkUserLogin() {
      const data = {
        action: 'check_user_login'
      };

      fetch(wp.ajaxUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams(data)
      })
      .then(response => response.json())
      .then(data => {
        if (data.success && data.data.isLoggedIn) {
            console.log("用户已登录");
        } else {
            console.log("用户未登录");
        }
      })
      .catch(error => console.error('Error:', error));
   }

   checkUserLogin();

注意：wp.ajaxUrl是WordPress提供的全局变量，指向admin-ajax.php文件的URL。如果你的代码中没有这个变量，可以通过在前端添加以下代码来定义它：

   <script type="text/javascript">
      var wp = wp || {};
      wp.ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
   </script>

原理：

前端通过AJAX请求admin-ajax.php，并指定action=check_user_login。
后端通过wp_ajax_nopriv_和wp_ajax_钩子处理请求，并返回用户登录状态。

方法三：通过Cookie判断（不推荐）

WordPress会在用户登录时设置一个Cookie（如wordpress_logged_in_）。理论上可以通过前端JavaScript读取该Cookie来判断用户是否登录，但这种方法不够安全且容易被绕过。

示例代码：

function isUserLoggedIn() {
    const cookies = document.cookie.split('; ');
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].split('=');
        if (cookie[0] === 'wordpress_logged_in_') {
            return true;
        }
    }
    return false;
}

document.addEventListener('DOMContentLoaded', function() {
    if (isUserLoggedIn()) {
        console.log('用户已登录');
    } else {
        console.log('用户未登录');
    }
});

注意：

这种方法依赖于Cookie，可能会因为Cookie被禁用或用户手动清除而失效。
不建议使用这种方法，因为它不够可靠。

总结

如果你只需要简单的前端判断，推荐使用方法一。
如果需要更安全、更灵活的判断，推荐使用方法二。
如果你希望快速实现，可以尝试方法三，但这种方法依赖于Cookie，可能会因为用户禁用Cookie或Cookie过期而失效。

虽然在WordPress主题开发中用户的登录状态主要通过PHP函数来判断，但可以通过设置全局变量、AJAX请求或Cookie等方式在前端间接判断用户的登录状态。推荐使用AJAX请求的方法，因为它更加安全和可靠。