仅向登录用户显示 html 页面

Question

我已经使用 JS Fetch api 进行了简单的身份验证，但现在的问题是我不知道如何保护我的 html 页面（我的意思是不允许未登录的用户查看这些页面）。 有很多关于身份验证和授权的教程，但这不是我想要的，它们中的大多数都在使用 Asp.net 或 react 等。

PS：对于前端，我只使用 html/css/ js，对于后端，我使用的是 spring boot。

Answer 1

法蒂玛。 有几种方法可以做到这一点。 我的建议是，因为您使用的是 html/css 和 vanilla JS，所以调用您的身份验证端点，在会话中存储必要的数据（身份验证令牌，超时，无论您拥有什么），并创建一个路由保护，这是一个在允许可视化页面之前检查存储在会话中的数据是否有效的 JS。 请注意，这不是优化的代码，并且有更安全的方法。

授权：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Save your auth data to session
       localStorage.setItem("auth", xhr.response)
    }
};
xhttp.open("POST", "your/auth/endnpoint");
xhttp.send();

路线守卫：

authData = localStorage.getItem("auth")
//Make your validations here.
if(authData){

}else{
    window.location.href = "your-permission-error-page";
}

如果您在每个页面上都导入路由保护，如果您的验证失败，用户可能会被重定向到错误页面。