使用 javascript 从 html 页面限制客户端

Question

I serve a HTML page, which presents within my users-authentication system.我提供一个 HTML 页面，该页面出现在我的用户身份验证系统中。

The HTML page should be unreachable when non-authenticated client tries to access it.当未经身份验证的客户端尝试访问 HTML 页面时，该页面应该无法访问。

So, I have the following JS code:所以，我有以下 JS 代码：

let isAuthenticated = false;
let username;

(async () => {
    // Retrieve username if logged-in
    try {
        const serverResponse = await fetch('api/auth/getUsername', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${localStorage.getItem('auth_token') || ''}`,
            },
        });
        const serverResponseData = await serverResponse.json();

        if (serverResponseData.success) {
            isAuthenticated = true;
            username = serverResponseData.data.username;
        } else {
            return window.location.href = '/';
        }
    } catch { } finally {
        $(document).ready(() => {
            // Username and auth buttons elements
            const $authButtonsContainerELM = $('#authButtonsContainer');
            const $navUserContainerELM = $('#navUserContainer');
            const $usernameText = $('#usernameText');

            if (isAuthenticated) {
                $authButtonsContainerELM.css('display', 'none');
                $navUserContainerELM.css('display', 'flex');
                $usernameText.html(username);
            } else {
                $authButtonsContainerELM.css('display', 'flex');
                $navUserContainerELM.css('display', 'none');
            }
        });
    }
})();

And here is my HTML code:这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>post blog</title>

    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery.min.js">\x3C/script>');</script>

    <script src="./JS/index.js"></script>

    <div>blbalalal</div>
</body>

</html>

Note that the actual HTML code in my source is a bit more complex of-course.请注意，我源代码中的实际 HTML 代码当然要复杂一些。

So basically when I go as not authenticated in my browser, I try to access this page.所以基本上当我 go 在我的浏览器中未通过身份验证时，我尝试访问此页面。 What happens is, I can see the HTML page for 1 sec then I got redirect back to / path.发生的事情是，我可以看到 HTML 页面 1 秒，然后我被重定向回/路径。 But I do see the HTML. How can I execute my JS code before the HTML loads?但我确实看到了 HTML。如何在 HTML 加载之前执行我的 JS 代码？

Answer 1

I would suggest you to store the auth_token in a cookie... Instead of localStorage .我建议您将auth_token存储在 cookie 中......而不是localStorage 。 So the cookie would be sent along the HTTP request... And the decision to serve the protected content would be made server-side.因此 cookie 将沿着 HTTP 请求发送...并且服务受保护内容的决定将由服务器端做出。

But if you insist... Just to practice ... You could hide the HTML by default via CSS for that split second:但是如果你坚持......只是为了练习......你可以在瞬间通过 CSS 默认隐藏 HTML：

Add the hiddenOnLoad class to the HTML markup:将hiddenOnLoad class 添加到 HTML 标记中：

<body class="hiddenOnLoad">

Which would just hide everything:这只会隐藏一切：

body.hiddenOnLoad *{
  display: none !important;
}

And inside $(document).ready() ... It the authentication succeeded:在$(document).ready()里面……认证成功了：

if(isAuthenticated){
  $("body").removeClass("hiddenOnLoad")
}

使用 javascript 从 html 页面限制客户端

问题描述

1 个解决方案

解决方案1
0 2021-01-28 20:56:34

使用 javascript 从 html 页面限制客户端

问题描述

1 个解决方案

解决方案1 0 2021-01-28 20:56:34

解决方案1
0 2021-01-28 20:56:34