用户登录后按团队跳转页面失效，默认跳转至access_denied.html

我有5个用户，需使用以下指定邮箱登录：

• red@mydomain.com
• blue@mydomain.com
• black@mydomain.com
• green@mydomain.com
• purple@mydomain.com

登录后应用会为每个邮箱分配对应团队：

• red@mydomain.com = Red
• blue@mydomain.com = Blue
• black@mydomain.com = Black
• green@mydomain.com = Green
• purple@mydomain.com = Purple

每个团队拥有专属的目标和动机页面（如red_objectives_page.html），各团队不可查看其他团队的内容。目前点击目标或动机按钮时，系统默认跳转到access_denied.html，但已确认Session已正确存储团队信息，且数据库能依据邮箱正确分配团队。以下是script.js中的代码：

document.addEventListener('DOMContentLoaded', function() {
var objectivesButton = document.getElementById('objectives-button');
if (objectivesButton) {
objectivesButton.addEventListener('click', function() {
var team = "<?php echo $team; ?>"; 

// Redirect users based on their team
if (team === "Red") {
window.location.href = 'red_objectives_page.html'; // Redirect user to the Red objectives
} else if (team === "Black") {
window.location.href = 'black_objectives_page.html'; // Redirect user to the Black objectives  
} else if (team === "Green") {
window.location.href = 'green_objectives_page.html'; // Redirect user to the Green objectives 
} else if (team === "Blue") {
window.location.href = 'blue_objectives_page.html'; // Redirect user to the Blue objectives 
} else if (team === "Purple") {
window.location.href = 'purple_objectives_page.html'; // Redirect user to the Purple obj   
} else {
window.location.href = 'access_denied.html'; // Redirect user access denied page if unknown    
}
});
}
});
// event listener for "Motivations" button
document.addEventListener('DOMContentLoaded', function() {
var motivationsButton = document.getElementById('motivations-button'); 
if (motivationsButton) {
motivationsButton.addEventListener('click', function() {
var team = "<?php echo $team; ?>"; // Team information from server-side

// Redirect users based on their team
if (team === "Red") {
window.location.href = 'red_motivations_page.html'; // Redirect user to the Red motivations 
} else if (team === "Black") {
window.location.href = 'black_motivations_page.html'; // Redirect user Black motivations
} else if (team === "Green") {
window.location.href = 'green_motivations_page.html'; // Redirect user Green motivations
} else if (team === "Blue") {
window.location.href = 'blue_motivations_page.html'; // Redirect user Blue motivations
} else if (team === "Purple") {
window.location.href = 'purple_motivations_page.html'; // Redirect user Purple motivations 
} else {
window.location.href = 'access_denied.html'; // Redirect to access denied page unknown teams
}
});
}
});

1. PHP变量转义错误：代码中var team = "<?php echo $team; ?>";的<和>是HTML转义字符，实际渲染后team变量的值是字符串"<?php echo $team; ?>"，而非服务器端输出的真实团队名称，导致所有条件判断都不匹配，直接进入else分支跳转到access_denied.html。
2. 代码冗余（非直接影响但需优化）：重复绑定DOMContentLoaded事件，属于不必要的代码冗余。

方案1：修正前端JS的PHP变量输出问题 #

将转义的PHP代码替换为未转义的版本，确保服务器能正确解析并输出团队名称，同时合并冗余的事件监听：

document.addEventListener('DOMContentLoaded', function() {
    // 目标按钮逻辑
    var objectivesButton = document.getElementById('objectives-button');
    if (objectivesButton) {
        objectivesButton.addEventListener('click', function() {
            var team = "<?php echo $team; ?>"; 

            if (team === "Red") {
                window.location.href = 'red_objectives_page.html';
            } else if (team === "Black") {
                window.location.href = 'black_objectives_page.html';  
            } else if (team === "Green") {
                window.location.href = 'green_objectives_page.html'; 
            } else if (team === "Blue") {
                window.location.href = 'blue_objectives_page.html'; 
            } else if (team === "Purple") {
                window.location.href = 'purple_objectives_page.html';   
            } else {
                window.location.href = 'access_denied.html';    
            }
        });
    }

    // 动机按钮逻辑
    var motivationsButton = document.getElementById('motivations-button'); 
    if (motivationsButton) {
        motivationsButton.addEventListener('click', function() {
            var team = "<?php echo $team; ?>"; 

            if (team === "Red") {
                window.location.href = 'red_motivations_page.html';
            } else if (team === "Black") {
                window.location.href = 'black_motivations_page.html';
            } else if (team === "Green") {
                window.location.href = 'green_motivations_page.html';
            } else if (team === "Blue") {
                window.location.href = 'blue_motivations_page.html';
            } else if (team === "Purple") {
                window.location.href = 'purple_motivations_page.html'; 
            } else {
                window.location.href = 'access_denied.html';
            }
        });
    }
});

方案2：后端控制跳转（更安全推荐） #

避免前端暴露页面路径，直接在后端处理跳转逻辑：

1. 修改HTML按钮，触发后端请求：

<button id="objectives-button" onclick="window.location.href='redirect.php?type=objectives'">目标</button>
<button id="motivations-button" onclick="window.location.href='redirect.php?type=motivations'">动机</button>

2. 创建redirect.php文件处理跳转：

<?php
session_start();
$team = $_SESSION['team']; // 从Session获取团队信息
$type = $_GET['type'];

$pageMap = [
    'objectives' => [
        'Red' => 'red_objectives_page.html',
        'Blue' => 'blue_objectives_page.html',
        'Black' => 'black_objectives_page.html',
        'Green' => 'green_objectives_page.html',
        'Purple' => 'purple_objectives_page.html'
    ],
    'motivations' => [
        'Red' => 'red_motivations_page.html',
        'Blue' => 'blue_motivations_page.html',
        'Black' => 'black_motivations_page.html',
        'Green' => 'green_motivations_page.html',
        'Purple' => 'purple_motivations_page.html'
    ]
];

if (isset($pageMap[$type][$team])) {
    header("Location: " . $pageMap[$type][$team]);
    exit;
} else {
    header("Location: access_denied.html");
    exit;
}
?>

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