WordPress多短代码场景下如何在JS端读取Session用户变量

• 浏览器端JS无法直接读取服务端存储的PHP Session数据，必须通过服务端把指定Session值输出为前端可访问的全局JS变量，才能在任意页面JS逻辑中调用。

一、适配现有插件体系的实现方法 #

你当前已经在用XYZ PHP Code插件运行Session读取逻辑，不需要额外安装插件，只需要改造该插件下的PHP代码块即可：

• 第一步：修改XYZ PHP Code对应的PHP代码，在读取Session值后，将其输出为无侵入的JS全局变量，代码参考：

<?php
// 和原有逻辑保持Session初始化一致性
if(!session_id()) session_start();

// 读取Session值并做兜底，避免空值报错
$session_username = $_SESSION['username'] ?? 'guest';
$session_role = $_SESSION['roles'] ?? 'guest';

// 输出到前端全局JS对象，不会生成可见页面内容
echo "<script>
window.sessionAuthData = {
    username: " . json_encode($session_username) . ",
    userRole: " . json_encode($session_role) . "
};
</script>";
?>

• 第二步：把这段代码生成的短代码插入到目标页面的最靠前位置，确保它的加载顺序早于WOW插件、WP-coder插件生成的短代码。

二、WP-coder插件内的JS调用方式 #

在WP-coder、WOW插件写的DataTables相关JS代码中，直接读取提前挂载的全局变量即可实现权限控制，代码参考：

// DataTables初始化逻辑
$(function() {
    // 读取全局的Session权限值，加兜底避免undefined报错
    const currentUserRole = window.sessionAuthData?.userRole || 'guest';
    const currentUsername = window.sessionAuthData?.username || '游客';

    $('#datatable-target').DataTable({
        // 基于角色控制表格功能
        dom: currentUserRole === 'administrator' ? 'Bfrtip' : 'frtip',
        buttons: currentUserRole === 'administrator' ? ['excel', 'print'] : [],
        // 基于角色控制列的可见性
        columnDefs: currentUserRole === 'administrator' ? [] : [
            { targets: [2], visible: false } // 非管理员隐藏敏感列
        ]
    });
});

三、注意事项 #

• 严格控制短代码加载顺序：如果输出全局变量的PHP短代码在DataTables JS短代码之后加载，JS执行时会取不到对应值，必须把全局变量输出的短代码放在页面最顶部。
• 安全边界提醒：前端JS层面的权限控制仅用于优化UI交互，不要把核心数据校验逻辑放在前端，涉及到敏感数据读取、修改的操作，必须在服务端二次校验Session值，避免被前端绕过。
• 不要通过DOM抓取页面文本的方式读取Session值：如果只是把Session值输出为可见的HTML文本，靠JS查找DOM节点取值的方式容错率极低，一旦页面布局调整就会失效，直接输出为JS全局变量是最稳定的方案。

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