确认登录及注销功能的代码(前端＋后端)

1.确认登录功能

应用场景

在使用网站某些功能时，比如将商品加入购物车、在论坛上下载文件等，需要用户先登录才可操作，这时需要确认用户是否登录，如果未登录跳转到登录页面。

实现思路

1. 后端：从session中取uid，如果有uid存储在session中，说明用户已登录，如果没有说明未登录；返回用户是否登录的提示信息，如果用户已登录，查询相应的用户名一并返回，用于显示在前端页面上。
2. 前端：在页头上，如果用户未登录，显示“登录”、“注销”的信息；如果用户已登录显示“welcome xxx”、“注销”的信息。在商品页面，点击加入购物车按钮时，如果用户未登录，跳转到登录页面；如果用户已登录，将商品添加到购物车。

实现代码

navbar.html

<ul class="logIn" id="loginList">
    <li>
        <a href="register.html">注册</a>
        <a>|</a>
    </li>
    <li>
        <a href="login.html">登录</a>
    </li>
</ul>
<ul class="logIn" id="welcomeList">
    <li>
        <a href="javascript:;">
            Welcome&nbsp;
            <span id="uname"></span>
        </a>
        <a>|</a>
    </li>
    <li>
        <a id="logout" href="javascript:;">注销</a>
    </li>
</ul>

isLogin.php

<?php
//判断用户是否登录，如果登录，把用户名返回去
//data/users/isLogin.php
header("Content-Type:application/json"); 
require_once("../init.php");
session_start();
@$uid=$_SESSION["uid"];
//不需要接收参数，去session中拿id
if($uid!=null){
    //如果有did，说明用户已登录
    $sql="SELECT uname FROM xxx_user WHERE uid=$uid";
    $result=mysqli_query($conn,$sql);
    $row=mysqli_fetch_row($result);
    $uname=$row[0]; 
    //取出uname
    echo json_encode(["ok"=>1,"uname"=>$uname]); 
    //返回提示信息和uname
}else
    echo json_encode(["ok"=>0]);

navbar.js

$.getJSON("data/users/isLogin.php",data=>{ 
    if(data.ok==0) 
    //如果用户未登录
        $("#loginList").show().next().hide();
        //显示$("#loginList")中“登录”、“注销”的信息
        //隐藏$("#loginList")中“welcome xxx”、“注销”的信息
    else{
    //如果用户已登录
        $("#loginList").hide().next().show();
        //隐藏$("#loginList")中“登录”、“注销”的信息
        //显示$("#loginList")中“welcome xxx(uname)”、“注销”的信息
        $("#uname").html(data.uname);
    }
});

product_details.js

$(".thing-details>.shop>div>a.cart").click(function(){
//给“加入购物车”按钮添加单击事件  
    $.get("data/users/isLogin.php",data=>{
    //判断用户是否登录，用户先登录才能加入购物车
        if(data.ok==1){
        //如果用户已登录
            var pid=location.search.split("=")[1];
            //获取商品id
            var count=$(".thing-details>.shop>div>p.account>input").val();
            //获取用户需要添加到购物车的商品数量
            $.get("data/cart/add.php",{pid,count},()=>{
            //将商品id和商品数量添加到购物车
                alert("加入购物车成功");
            });
        }else{
        //如果用户未登录

            location.href="login.html?back="+location.href;
            //跳转到登录页面
        }
});

2.注销功能

实现原理

• 注销原理：从session中将uid删除

实现代码

logout.php

<?php
session_start();
session_unset();
//释放当前会话注册的所有会话变量
session_destroy();
//销毁当前会话中的全部数据

navbar.js

$("#logout").click(function(){
    $.get("data/users/logout.php").then(()=>{
        $("#loginList").show().next().hide();
        //显示“登录”、“注销”信息
        location.reload(true); 
        //强制重新刷新页面
    });
});

更多内容，欢迎关注微信公众号“让知识成为资产”。