多角色登录跳转异常：选择Finance角色仍进入Admin仪表盘

我想用单个登录表单实现不同管理员角色的登录功能，数据库里角色分为admin和finance。但现在选Finance角色登录后，还是会跳转到Admin仪表盘，而不是Finance仪表盘。下面是我的登录表单和前端JavaScript代码，请问我漏了什么？

登录表单代码 #

<form method="post" name="login_form">
  <div class="form-group">
    <input class="form-control form-control-lg" id="username" alt="username" type="text" placeholder="Username" autocomplete="off">
  </div>
  <div class="form-group">
    <input class="form-control form-control-lg" id="password" type="password" alt="password" placeholder="Password"  autocomplete="off">
  </div>
  <div class="input-group mb-3">
    <select type="text" class="form-control" name="type" required="">
      <option value="" disabled="" disabled="" selected="true">--Select Role--</option>
      <option value="admin">Admin</option>
      <option value="finance">Finance</option>
    </select>
  </div>
  <div class="form-group">
    <label class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox" id="remember" onclick="myFunction()"><span class="custom-control-label">Show Password</span>
    </label>
  </div>
  <div class="form-group">
    <button class="btn btn-lg btn-block button3" ;color: rgb(243, 245, 238) !important;" value="Sign in" id="btn-login" name="btn-login">Log in</button>
    </div>
    <div class="form-group" id="alert-msg">
  </form>

前端JavaScript代码 #

<script type="text/javascript">
 jQuery(function(){
    $('form[name="login_form"]').on('submit', function(e){
      e.preventDefault();

      var u_username = $(this).find('input[alt="username"]').val();
      var p_password = $(this).find('input[alt="password"]').val();
      // var s_status = 1;

      if (u_username === '' && p_password ===''){
        $('#alert-msg').html('<div class="alert alert-danger"> Required Username and Password!</div>');
      }else{
        $.ajax({
          type: 'POST',
          url: 'init/controllers/login_process.php',
          data: {
            username: u_username,
            password: p_password
            //status: s_status
         },
         beforeSend:  function(){
           $('#alert-msg').html('');
         }
       })
       .done(function(t){
         if (t == 0){
           $('#alert-msg').html('<div class="alert alert-danger">Incorrect username or password!</div>');
         }else{
           $("#btn-login").html('<img src="assets/images/loading.gif" /> &nbsp; Signing In ...');
           setTimeout(' window.location.href = "documents/index.php"; ',2000);
         }
       });
     }
   });
 });
 </script>
 <script>
 function myFunction() {
   var x = document.getElementById("password");
   if (x.type === "password") {
     x.type = "text";
   } else {
     x.type = "password";
   }
 }
 </script>

问题排查与修复方案 #

核心遗漏点 #

1. 未传递角色参数给后端：AJAX请求只传了用户名和密码，完全没把用户选中的角色（下拉框name="type"的值）发给后端，后端无法识别用户要登录的角色类型。
2. 跳转逻辑固定：登录成功后不管角色是什么，都硬编码跳转到documents/index.php（Admin仪表盘），没有根据用户角色做差异化跳转。

具体修复步骤 #

1. 修改前端AJAX，传递角色并动态跳转

更新JS代码，增加角色获取、校验和动态跳转逻辑：

jQuery(function(){
    $('form[name="login_form"]').on('submit', function(e){
      e.preventDefault();
      // 获取选中的角色
      var selectedRole = $(this).find('select[name="type"]').val();
      var u_username = $(this).find('input[alt="username"]').val();
      var p_password = $(this).find('input[alt="password"]').val();

      // 增加角色为空的校验
      if (u_username === '' && p_password ===''){
        $('#alert-msg').html('<div class="alert alert-danger"> 用户名和密码必填！</div>');
      } else if (!selectedRole) {
        $('#alert-msg').html('<div class="alert alert-danger"> 请选择角色！</div>');
      } else {
        $.ajax({
          type: 'POST',
          url: 'init/controllers/login_process.php',
          data: {
            username: u_username,
            password: p_password,
            type: selectedRole // 新增传递角色参数
         },
         beforeSend:  function(){
           $('#alert-msg').html('');
         }
       })
       .done(function(response){
         // 后端需要返回JSON格式数据，比如{status: 1, role: "admin"}
         var res = JSON.parse(response);
         if (res.status == 0){
           $('#alert-msg').html('<div class="alert alert-danger">用户名或密码错误！</div>');
         }else{
           $("#btn-login").html('<img src="assets/images/loading.gif" /> &nbsp; 登录中...');
           // 根据角色跳转对应仪表盘
           var targetPage = res.role === 'admin' ? 'documents/index.php' : 'finance/index.php';
           setTimeout(function(){ window.location.href = targetPage; }, 2000);
         }
       });
     }
   });
 });

2. 修改后端login_process.php逻辑

• 接收前端传来的type参数，验证时要同时校验用户名、密码、角色是否匹配数据库中的记录（防止用户用admin账号选finance角色登录）
• 登录成功后返回包含角色信息的JSON，示例代码：

// 假设数据库查询后得到用户角色
$userRole = '';
// 验证逻辑：检查用户名、密码、传入的角色是否和数据库一致
if (验证通过) {
    $userRole = $row['role']; // 从数据库取出用户实际角色
    echo json_encode(['status' => 1, 'role' => $userRole]);
} else {
    echo json_encode(['status' => 0]);
}

3. 额外注意事项

• 必须在后端校验用户实际角色和前端传递的角色是否一致，避免恶意篡改请求参数越权访问
• 前端表单要增加角色必填的校验，防止用户未选角色就提交

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