jquery 自动登录

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。自动登录是指用户无需手动输入用户名和密码即可登录系统，通常通过保存用户的登录状态或使用令牌（如 Cookie 或 Token）来实现。

类型

基于 Cookie 的自动登录：将用户的登录状态保存在 Cookie 中，下次访问时读取 Cookie 并自动登录。
基于 Token 的自动登录：使用 JWT（JSON Web Token）或其他形式的 Token 来验证用户身份。

应用场景

网站：用户在登录后，下次访问时无需重新登录。
Web 应用：提高用户体验，减少重复登录的麻烦。

示例代码

基于 Cookie 的自动登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Auto Login Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="login">
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button id="loginBtn">Login</button>
    </div>
    <div id="welcome" style="display:none;">
        Welcome, <span id="usernameDisplay"></span>!
    </div>

    <script>
        $(document).ready(function() {
            // Check if user is already logged in
            if (localStorage.getItem('isLoggedIn') === 'true') {
                $('#usernameDisplay').text(localStorage.getItem('username'));
                $('#login').hide();
                $('#welcome').show();
            }

            $('#loginBtn').click(function() {
                var username = $('#username').val();
                var password = $('#password').val();

                // Simulate login request (replace with actual API call)
                $.ajax({
                    url: '/login',
                    method: 'POST',
                    data: { username: username, password: password },
                    success: function(response) {
                        if (response.success) {
                            localStorage.setItem('isLoggedIn', 'true');
                            localStorage.setItem('username', username);
                            $('#login').hide();
                            $('#welcome').show();
                        } else {
                            alert('Login failed!');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

基于 Token 的自动登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Auto Login Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="login">
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button id="loginBtn">Login</button>
    </div>
    <div id="welcome" style="display:none;">
        Welcome, <span id="usernameDisplay"></span>!
    </div>

    <script>
        $(document).ready(function() {
            // Check if user is already logged in
            var token = localStorage.getItem('token');
            if (token) {
                $('#usernameDisplay').text(localStorage.getItem('username'));
                $('#login').hide();
                $('#welcome').show();
            }

            $('#loginBtn').click(function() {
                var username = $('#username').val();
                var password = $('#password').val();

                // Simulate login request (replace with actual API call)
                $.ajax({
                    url: '/login',
                    method: 'POST',
                    data: { username: username, password: password },
                    success: function(response) {
                        if (response.success) {
                            localStorage.setItem('token', response.token);
                            localStorage.setItem('username', username);
                            $('#login').hide();
                            $('#welcome').show();
                        } else {
                            alert('Login failed!');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>