Google Apps Script登录成功后跳转至同项目其他HTML页面的实现方法

一、服务器端（.gs）代码 #

1. 登录验证函数 #

用于接收前端传入的账号密码，完成验证逻辑（可根据需求替换为从谷歌表格/其他数据源读取验证）：

function validateLogin(username, password) {
  // 示例验证逻辑，替换为你的实际规则
  const validCredentials = {
    "admin": "admin123",
    "user01": "userpass"
  };
  
  return validCredentials.hasOwnProperty(username) && validCredentials[username] === password;
}

2. 返回目标页面函数 #

负责加载并返回你要跳转的HTML表单页面：

function getTargetFormPage() {
  // "TargetForm"是你已创建的目标HTML文件名，替换为实际名称
  return HtmlService.createHtmlOutputFromFile("TargetForm")
    .setTitle("目标表单页面");
}

可选：路由处理函数（整页跳转用） #

如果需要实现整页跳转而非替换当前页面内容，添加doGet路由函数：

function doGet(e) {
  // 根据URL参数返回对应页面
  if (e.parameter.page === "targetForm") {
    return getTargetFormPage();
  }
  // 默认返回登录页面（"Login"是你的登录页HTML文件名）
  return HtmlService.createHtmlOutputFromFile("Login");
}

二、前端LoginUser函数调整 #

修改你的前端登录验证函数，调用后端接口并处理跳转：

async function LoginUser() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  // 调用后端验证函数
  google.script.run.withSuccessHandler(isValid => {
    if (isValid) {
      // 方式1：替换当前页面内容（无需路由函数）
      google.script.run.withSuccessHandler(pageHtml => {
        document.body.innerHTML = pageHtml;
      }).getTargetFormPage();

      // 方式2：整页跳转（需配合上面的doGet路由函数）
      // window.location.href = `${google.script.url.getUrl()}?page=targetForm`;
    } else {
      alert("账号或密码错误");
    }
  }).validateLogin(username, password);
}

关键注意点 #

• 确保项目中已创建对应名称的HTML文件（登录页Login、目标表单页TargetForm）。
• google.script.run是GAS前后端通信的核心方法，withSuccessHandler用于接收后端返回的结果并处理。
• 验证逻辑可灵活扩展，比如连接谷歌表格读取用户数据：通过SpreadsheetApp.openById("表格ID").getSheetByName("用户表").getDataRange().getValues()获取用户列表后对比。

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