全栈：Web 用户登录过程实例与Cookie管理

用户创建与使用cookie全过程

1.用户访问网站

当用户使用浏览器访问一个网站时，浏览器会向服务器发送一个HTTP请求。

2. 服务器响应请求

服务器接收到HTTP请求后，会处理请求并准备响应。如果服务器需要设置Cookie，它会在HTTP响应头中包含一个Set-Cookie指令。

3. 创建Cookie

服务器使用setcookie()函数（在PHP中）或等效的方法来创建Cookie。这个函数允许服务器设置Cookie的名称、值、过期时间、路径、域和其他属性。

PHP示例:

setcookie("user_id", "12345", time() + 3600, "/", "example.com", false, true);

"user_id" 是Cookie的名称。
"12345" 是Cookie的值。
time() + 3600 设置Cookie的过期时间为当前时间加1小时。
"/" 指定Cookie的Path属性，意味着Cookie对于example.com的所有页面都是可访问的。
"example.com" 指定Cookie的Domain属性，意味着Cookie仅在example.com域下有效。
false 表示不使用安全的传输层协议（HTTPS）。
true 设置Cookie为HttpOnly，这意味着Cookie不能通过JavaScript访问，增加了安全性。

4. 发送Cookie到浏览器

服务器将带有Set-Cookie指令的HTTP响应发送回浏览器。浏览器解析这些指令，并根据它们创建Cookie。

5. 浏览器存储Cookie

浏览器会将接收到的Cookie存储在内存中（会话Cookie）或磁盘上（持久Cookie）。存储的位置和方式由浏览器的隐私和安全设置决定。

6. 后续请求自动携带Cookie

当用户在同一个域和路径下进行后续请求时，浏览器会自动在HTTP请求头中包含之前存储的Cookie，通过Cookie指令发送回服务器。

示例:

Cookie: user_id=12345; other_cookie=value

7. 服务器接收Cookie

服务器接收到带有Cookie的HTTP请求后，可以从请求头中读取Cookie的值，并使用这些信息来识别用户的状态或偏好。

8. 使用Cookie信息

服务器可以使用Cookie中的信息来个性化用户的体验，例如，通过使用用户的ID来恢复他们的购物车内容，或者根据用户的偏好提供定制化的内容。

9. Cookie的生命周期结束

Cookie的生命周期可以是短暂的（会话Cookie），也可以是持久的（设置了过期时间的Cookie）。

会话Cookie 在用户关闭浏览器时自动删除。
持久Cookie 会在指定的过期时间到达后自动删除，或者用户可以手动清除它们。

10. 删除Cookie

可以通过两种方式删除Cookie：

过期：当Cookie的过期时间到达时，浏览器会自动删除它。
手动：用户可以手动通过浏览器设置删除Cookie，或者服务器可以通过发送一个带有过去过期时间的Set-Cookie指令来指示浏览器删除特定的Cookie。

登录流程：

用户输入信息：用户在登录页面输入用户名和密码。
提交验证：用户提交表单，这些信息以POST请求的形式发送到服务器。
服务器验证：服务器接收到请求，验证数据库中的用户名和密码是否与用户输入的匹配。
设置cookie ：一旦验证成功，服务器使用setcookie()函数创建一个cookie来标识用户已登录
重定向：服务器通常会重定向用户到一个受保护的页面或用户的个人主页。

维持登录状态：

发送cookie：浏览器会在每次请求服务器时自动携带相关的cookie。
检查cookie：服务器检查请求中是否包含特定的cookie来确定用户是否已登录：

注销流程：

注销请求：用户点击注销链接，请求服务器结束会话。
删除cookie：服务器通过设置cookie的过期时间为过去的时间来删除它：
重定向到登录页面：注销后，通常将用户重定向回登录页面。

前端：进行用户登录，并提交post表单到指定脚本

html 复制代码

07.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="09.php" method="post" >
        用户名<input type="text" name="username">
        邮箱<input type="text" name="email">
        <input type="submit">
    </form>
</body>
</html>

后端登录验证，验证用户名密码后，创建cookie存储用户名

php 复制代码

09.php
<?php

    if(empty($_POST['uname']) || empty($_POST['passwd'])){

        if($_POST['uname'] == "zhangsan" && $_POST['passwd'] == 123456){
            
            setcookie("username",$_POST['uname'],time()+3600);
            
            echo '<a href="06.php" target="_blank" >access</a>';
            
        }else{
            echo '<script>alert("Invalid username or password")</script>';
        }

    }else{
        echo '<script>alert("The user name and password are empty")</script>';
    }

?>

检查用户提交的用户名和密码，如果用户名是"zhangsan"且密码是123456，则会设置一个名为"username"的cookie，并将用户重定向到名为"06.php"的页面。如果用户名或密码不正确，或者两者都为空，会弹出一个警告框提示用户。

代码检查前端表单，使用empty函数检查$_POST['uname']属性，和``$_POST['passwd']属性是否为空，并使用逻辑与进行运算。最后使用逻辑非取反

如果用户名和密码不为空，脚本继续检查用户名是否是"zhangsan"且密码是否是123456。

如果用户名和密码都正确，脚本使用setcookie函数设置一个名为"username"的cookie，该cookie的值为用户提交的用户名，并且有效期为1小时（3600秒）。

然后会输出一个a标签，链接到"06.php"页面的超链接，用户可以通过点击这个链接继续访问。

如果用户名或密码不正确，脚本会输出一个JavaScript的alert函数，弹出提示框，提示用户"Invalid username or password"。

如果前端传递表单中，用户名和密码其一，或都为空，脚本会输出一个JavaScript的alert函数，弹出提示框，提示用户"The user name and password are empty"。

测试登录状态

检查cookie中是否有用户登录参数，并且根据检查结果提供不同的响应。

php 复制代码

06.php
<?php    
    header("content-type:text/html;charset=utf8");

    if(!(empty($_COOKIE['username']))){
        echo '欢迎用户：' . $_COOKIE['username'];
    }else{
        echo "<script >";
        echo "alert('未登录，即将重定向');";
        echo "window.location.href='08.html';";
        echo "</script>";
        
    }
    // echo '<a href="10.php">点击清除登录信息</a>';
    echo'<form action="10.php" method="get">';
    echo'<button type="submit">点击清除登录信息</button>';
    echo'</form>';
    
?>

1.使用empty()函数检查$_COOKIE['username']是否为空。

$_COOKIE是一个超全局变量，它包含了所有由客户端发送到服务器的cookie信息。

如果username cookie不为空，说明用户已经登录。

2.如果用户已经登录，输出欢迎信息，并将用户名（存储在username cookie中的值）展示给用户。

如果username cookie为空，表示用户尚未登录。

3.在用户未登录的情况下，代码将执行以下操作：

使用<script>标签内联定义一个JavaScript脚本。

使用alert()函数弹出一个警告框，提示用户未登录。

使用window.location.href='08.html';将用户重定向到08.html页面。

4.无论用户是否登录，接下来的代码提供了一个表单，其中包含一个按钮。

当用户点击这个按钮时，表单会以GET方法提交并跳转到10.php，用于清除登录信息，例如删除相关的cookie。

用户退出登录状态，清除cookie值

php 复制代码

10.php
<?php

    setcookie("username",$_COOKIE['username'],time()-3600);
    header("Location:08.html");
?>

清除cookie，并重定向到前端登录页面：

setcookie("username", $_COOKIE['username'], time() - 3600);：

setcookie()函数用于设置cookie。

第一个参数"username"是要设置的cookie的名称。

第二个参数$_COOKIE['username']是从客户端发送到服务器的现有cookie的值。这意味着即使用户之前没有设置username cookie，这段代码也不会产生错误，因为$_COOKIE['username']在没有对应cookie时为null。

第三个参数time() - 3600设置了cookie的过期时间。time()函数返回当前的Unix时间戳，减去3600（一个小时的秒数）意味着cookie会在设置后的一个小时前过期，这实际上会立即删除这个cookie。

header("Location: 08.html");：

header()函数用于发送原始的HTTP头部到客户端。在这里，它发送的是一个Location头部，这会告诉浏览器服务器希望客户端重定向到另一个URL。

"08.html"是服务器上的目标页面的路径，用户将被重定向到这个页面。

setcookie扩展

在PHP中，创建一个同名的cookie并立即设置其过期时间，实际上是一个删除该cookie的技巧。这是因为HTTP协议没有直接提供删除cookie的方法，但你可以通过设置一个过期时间来间接删除它。

创建并删除同名cookie的步骤和原因：

创建同名cookie ：使用setcookie()函数创建一个同名的cookie，意味着你正在创建一个新的cookie来覆盖之前存在的同名cookie。

设置过期时间：将新cookie的过期时间设置为当前时间减去一个较大的数值（例如3600秒，即1小时）。这样，新cookie的过期时间实际上是在过去，这告诉浏览器该cookie已经不再有效。

浏览器响应：浏览器接收到这个带有过去过期时间的cookie后，会认为它已经过期，并从用户的系统中删除它。

全栈：Web 用户登录过程实例与Cookie管理

用户创建与使用cookie全过程

1.用户访问网站

2. 服务器响应请求

3. 创建Cookie

4. 发送Cookie到浏览器

5. 浏览器存储Cookie

6. 后续请求自动携带Cookie

7. 服务器接收Cookie

8. 使用Cookie信息

9. Cookie的生命周期结束

10. 删除Cookie

cookie：用户登录实例

登录流程：

维持登录状态：

注销流程：

前端：进行用户登录，并提交post表单到指定脚本

后端登录验证，验证用户名密码后，创建cookie存储用户名

测试登录状态

用户退出登录状态，清除cookie值

setcookie扩展