僅向登錄用戶顯示 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";
}

如果您在每個頁面上都導入路由保護，如果您的驗證失敗，用戶可能會被重定向到錯誤頁面。