如何使用PhoneGap为移动应用创建安全页面并实现权限验证

嘿，这个权限验证的痛点我做PhoneGap/Cordova应用的时候也踩过坑，结合你提到的localStorage和全局变量思路，给你梳理几个靠谱的实现方案：

方案一：LocalStorage + 后端令牌验证（推荐） #

这个方案兼顾持久化和安全性，是移动端最常用的方式：

1. 登录成功时存储验证凭证 #

当Ajax请求后端PHP验证登录成功后，把后端返回的唯一验证令牌（绝对不要存密码！）存在localStorage里：

// 登录Ajax成功回调示例
function loginSuccess(response) {
  // 假设后端返回包含token和过期时间的JSON
  if (response.success) {
    localStorage.setItem('authToken', response.authToken);
    localStorage.setItem('tokenExpiry', response.tokenExpiry);
    // 跳转专属页面
    window.location.href = 'exclusive.html';
  }
}

2. 专属页面加载时验证权限 #

在专属页面的初始化逻辑里，先做前端初步校验，再请求后端确认令牌的真实性（这步是关键，防止前端篡改数据）：

document.addEventListener('DOMContentLoaded', function() {
  const authToken = localStorage.getItem('authToken');
  const tokenExpiry = localStorage.getItem('tokenExpiry');
  
  // 前端先快速校验：无令牌或令牌直接过期
  if (!authToken || new Date() > new Date(tokenExpiry)) {
    localStorage.clear(); // 清除无效凭证
    window.location.href = 'login.html';
    return;
  }

  // 发送请求到后端验证令牌有效性
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'verify_token.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    if (xhr.status === 200) {
      const result = JSON.parse(xhr.responseText);
      if (result.valid) {
        // 验证通过，加载专属内容
        loadExclusiveContent();
      } else {
        localStorage.clear();
        window.location.href = 'login.html';
      }
    } else {
      // 网络错误或后端异常，直接跳转登录页
      window.location.href = 'login.html';
    }
  };
  xhr.send(`token=${encodeURIComponent(authToken)}`);
});

3. 后端PHP验证逻辑（verify_token.php） #

后端要负责校验令牌是否存在、未过期，且关联有效用户：

<?php
session_start();
// 替换为你的数据库连接信息
$db = mysqli_connect('你的服务器地址', '数据库用户名', '密码', '数据库名');

$token = $_POST['token'] ?? '';
if (empty($token)) {
  echo json_encode(['valid' => false]);
  exit;
}

// 用预处理查询防止SQL注入
$stmt = mysqli_prepare($db, "SELECT user_id FROM users WHERE auth_token = ? AND token_expiry > NOW()");
mysqli_stmt_bind_param($stmt, 's', $token);
mysqli_stmt_execute($stmt);
mysqli_stmt_store_result($stmt);

if (mysqli_stmt_num_rows($stmt) > 0) {
  // 令牌有效，可将用户ID存入session供后续接口使用
  mysqli_stmt_bind_result($stmt, $userId);
  mysqli_stmt_fetch($stmt);
  $_SESSION['user_id'] = $userId;
  echo json_encode(['valid' => true]);
} else {
  echo json_encode(['valid' => false]);
}

mysqli_stmt_close($stmt);
mysqli_close($db);
?>

方案二：全局Window变量（仅临时会话场景） #

这个方案适合不需要持久化的临时会话，但页面刷新后变量会丢失，所以只能作为辅助手段，不能单独依赖：

• 登录成功后，跳转前设置全局变量：

  window.currentUser = {
    userId: response.userId,
    isAuthenticated: true
  };
  window.location.href = 'exclusive.html';
  

• 专属页面加载时检查：

  if (!window.currentUser || !window.currentUser.isAuthenticated) {
    window.location.href = 'login.html';
  }
  

⚠️ 注意：如果用户直接输入专属页面URL，这个变量会不存在，所以必须配合后端验证逻辑。

额外安全建议 #

• 不要在localStorage存储敏感信息（如密码），只存后端生成的短期有效令牌。
• 可以使用Cordova的cordova-plugin-secure-storage插件替代普通localStorage，把令牌存在系统安全存储里（iOS的Keychain、Android的Keystore），安全性更高。
• 所有专属页面都要加验证逻辑，不要依赖前端跳转拦截，因为用户可能绕过前端直接访问页面URL。

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