我的问题是我想在登录后在母版页布局中启用 html 元素，但我不能

Question

这就是我的全部代码。 我的问题是我想在登录后在母版页布局中启用 html 元素。 但我不能。

<li>
    <a href="@Href("~/Admin/")" id="btn_admin">Admin</a>
</li>

我在这里给身份证。 我跑步时正在加载。 在脚本部分，我写了这个

document.getElementById('btn_admin').style.display = "none";   

并在签名按钮内，单击它后，我想向管理员显示以下代码在母版页的同一脚本中。

 $(document).ready(function () {
            $("#btn_submit").click(function () {
                var user = {};
                user.Email = $('#username').val();
                user.Password = $('#password').val();
                $.ajax({
                    url: 'https://localhost:44300/api/auth/Login',
                    type: 'POST',
                    data: user,
                    success: function (response) {
                        console.log(response);
                        if (response.Succeeded) {
                            $.cookie('UserId', response.UserId, { expires: 7, path: '/' });
                            $.cookie('Token', response.Token, { expires: 7, path: '/' });
                            //$("#btnLogin").fadeOut();
                            document.getElementById('btnLogin').style.display = "none";
                            document.getElementById('btn_admin').style.display = "block";
                            window.location.href = '/Home';

                        }
                        else {
                            alert(response.Message);
                        }
                        // setCookie("UserId", response.UserId);
                        //setCookie("Token", response.Token);

                    },
                    error: function () {
                        console.log('Error in Operation');
                    }
                });
            });

Answer 1

点击它后，我想显示管理员

你在这里成功地做到了：

document.getElementById('btn_admin').style.display = "block";

但是，接下来要做的就是重定向用户：

window.location.href = '/Home';

因此，当用户导航到另一个页面时，对页面的 state 所做的任何更改当然会丢失。 毕竟，当用户不再在该页面上时，如何期望链接仍然可见？

从概念上退一步，听起来你想要的可以描述为：

在主布局上，如果用户当前已登录，则显示“管理员”链接。

那是服务器端逻辑，而不是客户端逻辑。 大概（希望）在https://localhost:44300/api/auth/Login的服务器端逻辑的某个地方设置了一些跟踪用户的方式。 ASP.NET MVC 具有内置的身份验证和授权 function，所以我假设您正在使用它或一个合理的替代方案。 在这种情况下，在布局视图中，您可能会执行以下操作：

@if (Request.IsAuthenticated) {
    <li>
        <a href="@Href("~/Admin/")" id="btn_admin">Admin</a>
    </li>
}

如果您使用角色，您甚至可以执行以下操作：

@if (Request.IsAuthenticated) {
    @if (User.IsInRole("Admin")) {
        <li>
            <a href="@Href("~/Admin/")" id="btn_admin">Admin</a>
        </li>
    }
}

这样，您甚至不必费心隐藏链接客户端：

document.getElementById('btn_admin').style.display = "none";

（顺便说一句，这不是一种安全措施。我假设你不认为它是，但为了完整起见，任何未来的读者都应该绝对意识到隐藏链接不会阻止用户访问页面.)

由于用户正在从一个页面导航到另一个页面，因此无论如何都会在每个页面加载时重新调用服务器端代码。 所以在这种情况下，这确实是放置这些条件的理想位置，这些条件在显示页面内容之前检查授权。