How to use JavaScript to jump to the login page-Front-end Q&A-php.cn

How to use JavaScript to jump to the login page

PHPz

Release： 2023-04-24 14:37:33

Original

4012 people have browsed it

With the development of the Internet, more and more websites and applications require users to log in before they can be used. In this process, we often need to use JavaScript to jump to the login page. In this article, we will explore how to implement a login page jump using JavaScript.

1. Normal login page jump

In website development, we usually need users to log in before they can enter the authorized page. At this time, we need to use JavaScript to jump to the login page.

The simplest way is to write a login form on the front-end page. After the user enters the username and password, the form data is sent to the backend through Ajax for verification. If the verification passes, use JavaScript to jump to the home page.

The HTML code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>登录页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
    <h1>登录页面</h1>
    <form id="login-form">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" />
      <br />
      <input type="submit" value="登录" />
    </form>
    <script>
      $(function() {
        $("#login-form").submit(function(e) {
          e.preventDefault();
          $.ajax({
            url: "/login",
            method: "POST",
            data: $(this).serialize(),
            success: function(resp) {
              if (resp.code === 0) {
                window.location.href = "/home";
              } else {
                alert(resp.message);
              }
            },
            error: function() {
              alert("请求失败");
            }
          });
        });
      });
    </script>
  </body>
</html>

Copy after login

The JavaScript code uses the Ajax method in jQuery to send the login form data to the background, and determine whether the login is successful based on the return value of the background interface. If the login is successful, use window.location.href to jump to the homepage.

2. Login and jump back to the login page

Sometimes, we need to jump to the login page when the user is already logged in. At this time, we need to use JavaScript to jump back to the login page. Login page operations.

Suppose that our website has an order page /orders that can only be accessed after logging in, and the user has already logged in and is browsing on the order page. In some cases, the user needs to log out and the page needs to jump to the login page. In this case, JavaScript needs to be used.

The JavaScript code is as follows:

if (localStorage.getItem("is_login") !== "true") {
  window.location.href = "/login";
}

Copy after login

We can save the user login status through localStorage. When the user logs out, set is_login to false. On the order page, determine whether is_login is true Jump to the login page.

If the user is already logged in, there will be no jump and the user will remain on the order page. If the user is not logged in, the page will jump to the login page.

3. Conclusion

This article mainly introduces how to use JavaScript to jump to the login page. Through two examples of normal login and jumping back to the login page after logging in, we can better master the JavaScript jump skills. Of course, this is just one of the ways JavaScript implements login jump, and we can also implement it in other ways. Hope it helps everyone.

The above is the detailed content of How to use JavaScript to jump to the login page. For more information, please follow other related articles on the PHP Chinese website!