如何在登录信息不在本地存储中时重定向页面?

huangapple go评论76阅读模式
英文:

How to redirect page if login is not in Local Storage?

问题

我怎样在登录未完成时进行重定向?
我刚开始学习 JavaScript,对基本的东西仍然感到困难...
我正在使用 Blogger,尝试了几次,但没有成功。

此外,我想创建一个注销按钮,以从本地存储中移除信息。

这是登录代码和本地存储:

var storeS = localStorage.getItem("users");
if (storeS == null) {
  var users = [{
    username: "test",
    password: "1234"
  }];
  localStorage.setItem("users", JSON.stringify(users));
}

function getUserUsername(username) {
  return JSON.parse(localStorage.getItem('users')).filter(users => users.username === username)
}

function cheklog() {
  var login = localStorage.getItem("login");
  if (login != null && login == "true") {
    document.querySelector(".wendyloginwrap").classList.add("hidden");
  }
}
cheklog();

function startlog() {
  var username = document.querySelector("#username").value;
  var password = document.querySelector("#password").value;

  if (getUserUsername(username.trim()).length > 0) {
    var user = getUserUsername(username.trim())[0];
    if (user.password == password.trim()) {
      document.querySelector("#login-area").classList.add("hidden");
      document.querySelector("#login-true").classList.remove("hidden");
      localStorage.setItem("login", "true");
      setTimeout(function() {
        window.location.href = "#";
      }, 2000);
    } else {
      document.querySelector("#akses").innerHTML = "用户名或密码无效!";
    }
  } else {
    document.querySelector("#akses").innerHTML = "找不到用户名";
  }
}

const show = () => {
  var password = document.querySelector("#password");
  var sandi = document.querySelector(".icon1");
  var sandidua = document.querySelector(".icon2");
  if (password.type === "password") {
    password.type = "text";
    sandidua.style.opacity = "1";
    sandi.style.opacity = "0";
  } else {
    password.type = "password";
    sandidua.style.opacity = "0";
    sandi.style.opacity = "1";
  }
}

希望这些代码对你有所帮助。

英文:

How can I redirect if the login is not done?
I'm starting in js and I'm still having difficulty with basic things...
I'm using Blogger, I've tried a few times, but I haven't been successful.

And in addition, I wanted to create a logout button to remove from local storage

This is login code + local storage:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var storeS = localStorage.getItem(&quot;users&quot;);
if (storeS == null) {
var users = [{
username: &quot;test&quot;,
password: &quot;1234&quot;
}];
localStorage.setItem(&quot;users&quot;, JSON.stringify(users));
}
function getUserUsername(username) {
return JSON.parse(localStorage.getItem(&#39;users&#39;)).filter(users =&gt; users.username === username)
}
function cheklog() {
var login = localStorage.getItem(&quot;login&quot;);
if (login != null &amp;&amp; login == &quot;true&quot;) {
document.querySelector(&quot;.wendyloginwrap&quot;).classList.add(&quot;hidden&quot;);
}
}
cheklog();
function startlog() {
var username = document.querySelector(&quot;#username&quot;).value;
var password = document.querySelector(&quot;#password&quot;).value;
if (getUserUsername(username.trim()).length &gt; 0) {
var user = getUserUsername(username.trim())[0];
if (user.password == password.trim()) {
document.querySelector(&quot;#login-area&quot;).classList.add(&quot;hidden&quot;);
document.querySelector(&quot;#login-true&quot;).classList.remove(&quot;hidden&quot;);
localStorage.setItem(&quot;login&quot;, &quot;true&quot;);
setTimeout(function() {
window.location.href = &quot;#&quot;;
}, 2000);
} else {
document.querySelector(&quot;#akses&quot;).innerHTML = &quot;username or password is invalid!&quot;;
}
} else {
document.querySelector(&quot;#akses&quot;).innerHTML = &quot;username not found&quot;;
}
}
const show = () =&gt; {
var password = document.querySelector(&quot;#password&quot;);
var sandi = document.querySelector(&quot;.icon1&quot;);
var sandidua = document.querySelector(&quot;.icon2&quot;);
if (password.type === &quot;password&quot;) {
password.type = &quot;text&quot;;
sandidua.style.opacity = &quot;1&quot;;
sandi.style.opacity = &quot;0&quot;;
} else {
password.type = &quot;password&quot;;
sandidua.style.opacity = &quot;0&quot;;
sandi.style.opacity = &quot;1&quot;;
}
}

<!-- end snippet -->

答案1

得分: 0

如果您想将用户重定向到登录页面,您可以简单地使用window.location.href或window.location.assign(),但检查必须在您想要保护的“x”页面上进行,就像这样:if (localStorage.getItem("login") !== "true") //重定向到登录页面。对于注销按钮,您也可以进行重定向,还可以使用localStorage.clear()(清除所有内容)或localStorage.removeItem(item)来清除本地存储。

英文:

If you want to redirect the user to the login page you can simply use window.location.href or window.location.assign() but the check must be done on the "x" page you want to protect, like if (localStorage.getItem(&quot;login&quot;) !== &quot;true&quot;) //redirect to login. For the logout button you can redirect as well and you can clear the local storage with localStorage.clear() (remove everythings) or localStorage.removeItem(item).

huangapple
  • 本文由 发表于 2023年6月29日 07:53:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76577329.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定