如何在JavaScript中读取PHP Session值实现侧边栏菜单权限控制？

第一步：将PHP端的用户权限同步到前端 #

你已经用PHP Session存储了登录用户信息，只需要在页面渲染时将「当前用户是否可访问Concerts」的标识输出为JS可读取的变量即可，示例代码如下（加到页面的script标签最顶部，或者head区域即可）：

<?php session_start(); // 注意页面顶部要先启动session才能读取session内容 ?>
<script>
// 此处判断逻辑可根据你的业务调整，两种常用判断方式二选一即可
const canAccessConcerts = <?php 
// 方式1：按权限标识判断，适合你后台给用户分了权限组的场景
echo isset($_SESSION['user']['allow_concerts']) && $_SESSION['user']['allow_concerts'] ? 'true' : 'false';

// 方式2：按指定用户名限制，比如只允许用户名为jack、amy的用户访问
// $allowedUsers = ['jack', 'amy'];
// echo isset($_SESSION['user']['username']) && in_array($_SESSION['user']['username'], $allowedUsers) ? 'true' : 'false';
?>;
</script>

第二步：用JS根据权限控制菜单点击 #

修改你原来的Concerts菜单点击逻辑，无权限时禁用点击、添加禁用样式，还可以可选添加权限提示：

const concertsMenu = document.getElementById('concerts');
if (canAccessConcerts) {
  // 有权限时正常跳转
  concertsMenu.onclick = function () {
    location.href = "concerts.php";
  };
} else {
  // 无权限时添加禁用样式
  concertsMenu.style.opacity = '0.5';
  concertsMenu.style.cursor = 'not-allowed';
  // 阻止默认跳转行为，可选添加弹窗提示
  concertsMenu.onclick = function(e) {
    e.preventDefault();
    alert('您暂无权限访问该板块');
  }
}

重要补充 #

前端的权限限制仅能优化交互体验，无法完全阻止用户访问，必须在concerts.php页面最顶部添加后端权限校验，避免用户直接输入URL绕过前端限制：

<?php
session_start();
// 权限校验逻辑和前端保持一致即可
$allowedUsers = ['jack', 'amy'];
if (!isset($_SESSION['user']['username']) || !in_array($_SESSION['user']['username'], $allowedUsers)) {
  // 无权限直接跳转回首页或者返回403错误
  header('Location: index.php');
  exit();
}
// 后续是concerts.php的正常业务代码
?>

内容的提问来源于stack exchange，提问作者Γιάννης Γιαννάκος