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

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

javascript html jquery

使用javascript从html页面限制客户端,javascript,html,jquery,Javascript,Html,Jquery,我提供一个HTML页面，它在我的用户身份验证系统中显示当未经身份验证的客户端尝试访问HTML页面时，应该无法访问该页面因此，我有以下JS代码： let isAuthenticated = false; let username; (async () => { // Retrieve username if logged-in try { const serverResponse = await fetch('api/auth/getUsername',

我提供一个HTML页面，它在我的用户身份验证系统中显示

当未经身份验证的客户端尝试访问HTML页面时，应该无法访问该页面

因此，我有以下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');
            }
        });
    }
})();

这是我的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>


博文
window.jQuery | | document.write（'\x3C/script>'）；
巴巴拉拉尔

请注意，我的源代码中的实际HTML代码当然要复杂一些

因此，基本上，当我在浏览器中以未经身份验证的身份进入时，我会尝试访问此页面。

发生的情况是，我可以看到HTML页面1秒钟，然后重定向回

路径。但我确实看到了HTML。如何在加载HTML之前执行JS代码？

我建议您将

auth\u令牌存储在cookie中。。。而不是localStorage
。所以cookie将随HTTP请求一起发送。。。服务受保护内容的决定将由服务器端做出
但是如果你坚持。。。只是为了练习。。。默认情况下，您可以在这一瞬间通过CSS隐藏HTML：
将hiddenOnLoad
类添加到HTML标记中：
<body class="hiddenOnLoad">

和内部$（document）.ready（）
。。。如果验证成功：
if(isAuthenticated){
  $("body").removeClass("hiddenOnLoad")
}

'当未经身份验证的客户端尝试访问HTML页面时，该页面应不可访问。'在这种情况下，JS是您最不应该使用的东西。只需在浏览器设置中将其关闭即可解决此问题。如果您需要这种级别的安全性，请在服务器端执行。@Rorymcrossan这是唯一的做法。安全性与此线程无关。您不能在HTML之前运行JavaScript。浏览器首先打开HTML文件，然后运行或加载找到的任何JS。因此，如果您只依赖于由JS控制的客户端重定向，那么您将始终首先获得HTML。
if(isAuthenticated){
  $("body").removeClass("hiddenOnLoad")
}