Question

背景：我正在创建一个将在嵌入式设备上运行的网站，该设备为用户提供了与该网站上的多个功能进行交互的界面。 HTML站点上的这些功能将连接到Python脚本，该脚本随后将控制连接到嵌入式设备的外部物理设备。

我的缺点：我有一个登录初始屏幕，仅当用户名和密码与JS文件中的静态字符串匹配时，该屏幕才会对用户进行身份验证。每个.html文件都有一个对应的.js文件。

我想要的是：我想要一个global.js文件，每个其他的.js文件都可以读取/写入“ loginState”变量，该变量将说明用户是否在“ /login.html”上正确进行了身份验证。这样，如果用户手动导航到“ /home.html”，则可以看到页面加载时“ loginState”是否为正确值，表明用户已进行身份验证。如果'loginState'不是正确的值，我将知道用户未正确进行身份验证，并将其定向到“ /login.html”。

我知道这是不使用php或ASP.NET来实现登录系统的一种非常规方式，但这是我的第一个站点，我正在尝试使用“原始” HTML和JS。

问题：我已经在下面实现了以下代码，但无法使'loginState'用作全局变量。

global.js

var loginState = "false";

login.html

<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="global.js"></script>

login.js

if(username == valid && password == valid) {
  window.location.pathname = '/home.html'
  loginState = "true"
}
else {
  console.log("Invalid credentials!")
  loginState = "false"
}

home.html

<script type="text/javascript" src="home.js"></script>
<script type="text/javascript" src="global.js"></script>

home.js

window.onload = function() {
  if(loginState != "true") {
    window.location.pathname = '/login.html'
  }
};

问题：我的JS是否存在某种错误，或者全局变量在JS中的文件之间不起作用？没有使用ASP.NET的更好的方法来实现我的目标吗？该解决方案不需要非常安全，该设备也不会暴露在互联网上。

Answer 1

我实现了sessionStorage来存储loginState的状态，并实现了localStorage来存储用户主题设置light或dark。

具有全局变量和JS的用户登录控件

1 个答案: