使用 HTML、CSS 和 JavaScript 构建登录系统

我在制作“学习 JavaScript”的学生门户时，用 HTML、CSS 和 JavaScript 构建了一个登录系统。这个系统运行良好，我想和大家分享一下。

系统如何运作

系统运行如下：

让用户在登录页面登录
1. 登录后，将用户的信息存储在中localStorage。
2. 重定向到内容页面
当学生进入一个页面时
1. 检查学生是否可以访问页面
2. 如果是，允许学生进入
3. 如果没有，则重定向到登录页面

检查学生是否登录

要检查学生是否已登录，我会检查localStorage是否有令牌。如果localStorage没有token，则表明该学生尚未登录。

async function isLoggedIn() {
  const token = store.get("token");
  if (!token) return false;
}

如果学生未登录，我会将他们重定向到登录页面。

async function autoRedirect() {
  const validLogin = await isLoggedIn();
  if (!validLogin && location.pathname !== "/login/") redirect("/login");
  if (validLogin && location.pathname === "/login/") redirect("/");
}

如果localStorage有 token，我仍然需要检查这个 token 的有效性。为此，我向服务器发送了另一个 POST 请求。

async function isLoggedIn() {
  // ...
  // Checks validity of token
  const response = await zlFetch.post(loginEndpoint, {
    auth: token,
    body: { course: "learn-javascript" }
  });
}

如果响应成功，我的服务器会返回另一个带有新到期日期的令牌。这个新令牌可以让学生保持更长时间的登录状态。

async function isLoggedIn() {
  // ...
  // Saves token into localStorage again
  const { token } = response.body;
  localStorage.setItem("token", token);

  return true;
}

更新学生的访问级别

此外token，我还存储了学生的“访问级别” localStorage。这个“访问级别”决定了学生可以访问哪些课程。

学生可以访问这些课程

学生无法访问这些课程

当学生第一次登录时，我会存储此访问级别。

function basiclogin (email, password) {
  const response = await zlFetch.post(/*...*/)
  const { token, user } = response.body
  // ...

  // user contains accessLevel
  localStorage.setItem('user', user)
}

当令牌验证通过后，我会再次存储访问级别。这样我就可以：

防止学生篡改他们的课程localStorage（并获得他们不应该获得的课程）
一旦学生升级到更高级别，就会自动更新其访问权限

一石二鸟！

function isLoggedIn() {
  // ...
  const { token, user } = response.body;
  localStorage.setItem("user", user);
}

注销

退出很简单，我们只需要清除我们放入的物品即可localStorage。

function logout() {
  localStorage.removeItem("token");
  localStorage.removeItem("user");
}

阻止不使用 JavaScript 的学生访问

本课程使用静态网站生成器构建。每节课都是一个纯 HTML 文件。如果学生关闭了 JavaScript，则可以绕过身份验证层直接阅读 HTML 代码。

这不应该发生。

为了防止人们关闭 JavaScript 来查看课程，我no-js在 HTML 元素中添加了一个类。

<html lang="en" class="no-js">
  ...
</html>

no-js当有 JavaScript 时我会删除此类。

document.documentElement.classList.remove("no-js");

如果用户关闭 JavaScript，我会隐藏主要内容。

/* Disallow access if there's no JavaScript */
.no-js main {
  display: none !important;
}

开启 JavaScript 的消息

如果学生尝试在不使用 JavaScript 的情况下访问课程门户，则会看到一个空白页。他们可能会感到困惑，以为页面没有加载。

我需要告诉这些学生打开 JavaScript，所以我添加了一个<noscript>标签。

<noscript
  >This course portal requires JavaScript to verify your identity. Please enable
  JavaScript to access the course.</noscript
>

这就是整个登录过程！

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员，请订阅我的新闻通讯。

鏂囩珷鏉ユ簮锛�https://dev.to/zellwk/building-a-login-system-with-html-css-and-javascript-enm