Headless WP场景下如何在前端检测WordPress用户登录状态？

解耦架构下没法直接复用单体WP的is_user_logged_in()逻辑，核心原因是前后端域名分离时，WordPress生成的登录态Cookie默认不会被前端请求携带，WPGraphQL本身已经内置了用户态查询能力，根据你的部署场景选对应方案即可。

方案一：同根域名部署（推荐，体验和单体WP一致） #

适合前端、WordPress后端部署在同一个一级域名下的场景（比如前端为www.example.com，后端为api.example.com），直接复用WordPress原生登录态Cookie，不需要额外做登录流程改造。

• 首先在WordPress主题的functions.php中添加跨域配置，允许前端域名携带凭证请求WPGraphQL接口：

// 配置REST及WPGraphQL接口跨域规则
add_action('rest_api_init', function() {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
}, 15);
add_filter('rest_pre_serve_request', function($response) {
    $frontendOrigin = '替换为你的NextJS线上域名';
    header("Access-Control-Allow-Origin: {$frontendOrigin}");
    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
    return $response;
}, 15);

add_filter('graphql_response_headers', function($headers) {
    $frontendOrigin = '替换为你的NextJS线上域名';
    $headers['Access-Control-Allow-Origin'] = $frontendOrigin;
    $headers['Access-Control-Allow-Credentials'] = 'true';
    return $headers;
});

• NextJS侧配置GraphQL请求客户端时，开启凭证携带配置，以常用的Apollo Client为例：

// lib/apollo-client.js
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: '替换为你的WPGraphQL接口地址，一般是https://你的WP域名/graphql',
  credentials: 'include', // 核心配置：跨域请求自动携带Cookie
  cache: new InMemoryCache(),
});

export default client;

• 编写登录态检测的GraphQL查询语句，WPGraphQL默认提供的viewer字段会自动根据请求携带的凭证返回当前登录用户信息，未登录时返回null：

query CheckUserLoginStatus {
  viewer {
    id
    name
    # 可以按需拉取用户权限字段，用来判断是否展示编辑类功能
    capabilities
  }
}

• 前端判断逻辑：请求返回的viewer字段非空即为已登录状态，可根据capabilities里的权限点（比如是否包含edit_posts）决定是否展示页面编辑按钮等受控功能。如果用NextJS App Router做SSR，需要在服务端请求时手动把请求头里的Cookie透传给WPGraphQL接口，避免SSR阶段拿不到浏览器侧的登录态。

方案二：跨根域名部署（JWT鉴权） #

如果前后端分属完全不同的一级域名，Cookie跨域受浏览器安全策略限制无法传递，改用JWT鉴权方案：

• 安装WPGraphQL JWT Authentication插件，在WordPress的wp-config.php中添加密钥配置：

// 替换为随机生成的长字符串即可
define('GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-own-random-secret-key');

• 用户在NextJS侧提交账号密码登录时，调用插件提供的login mutation获取JWT Token，将Token存在前端HttpOnly Cookie或者localStorage中。
• 后续所有WPGraphQL请求都在请求头中添加Authorization: Bearer ${存储的Token}，同样调用上述viewer查询，能正常返回用户信息即为登录态有效，返回未授权错误则引导用户重新登录即可。

注意：所有涉及权限的写操作（比如保存页面编辑内容、发布评论），不能只依赖前端的登录态判断，必须在WPGraphQL自定义接口或者业务逻辑层再次做用户权限校验，避免前端逻辑被绕过引发安全问题。

内容的提问来源于stack exchange，提问作者Lenin Nava