使用cookie实现登录状态的保存及判定

冷不防 2022-06-15 09:38 383阅读 0赞

# **使用cookie实现登录状态的保存及判定** #

Cookie是指某些网站为了辨别用户身份而存储在用户本地终端上的数据（通常经过加密）。

所以通过cookie可以实现对用户登录状态的判定，防止用户不经过登录直接进入一些页面，或者进入一些没有权限的页面。

那么如何对cookie进行操作呢？

## **对cookie的写操作** ##

在cookie中，除了name和value，每条记录还有很多属性，如失效时间，是否采用安全协议传输等等，大部分属性不常用到，在此不详细介绍，[这里][Link 1]有相当详细的介绍。

下面是我实现的，对cookie的name、value和失效时间的写方法：

function setCookie(c_name, value, expiredays) { 
        var exdate = new Date();
        exdate.setDate(exdate.getDate + expiredays);
        document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); 
    }

代码还是很简单的，只需要将传入的值组合成字符串放入cookie中就可以了。

当使用document.cookie对cookie进行操作时，浏览器会自动把传入的name和已经存在cookie中的name进行对比，如果已经存在那么就会覆盖掉，如果不存在就会创建一条新的cookie记录来保存键值。

## **对cookie的读操作** ##

在对cookie进行读操作时，需要对cookie是否存在，cookie中是否存有这条记录进行判断。

下面是我实现的，根据name来进行cookie的读操作：

function getCookie(c_name) { 
    if (document.cookie.length>0)//首先查询cookie是否是空的
      {
      c_start=document.cookie.indexOf(c_name + "=")//检测这个cookie是否存在
      if (c_start!=-1)//如果cookie存在
        { 
        c_start=c_start + c_name.length+1 //获取到cookie的值的开始位置
        c_end=document.cookie.indexOf(";",c_start)//从c_start开始查找";"的存在
        if (c_end==-1) c_end=document.cookie.length//如果没找到，说明是最后一项
        return unescape(document.cookie.substring(c_start,c_end))//把cookie的值拆分出来并且对这个值进行解码，unescape()与escape()相对，对被escape()编码的字符串进行解码
        } 
      }
    return ""//不存在就返回空
    }

主要是通过字符串操作，找到存储的value的位置。

**注意：** 在这里，有个坑。。。就是indexOf()，会把检测到的第一个符合条件的字符位置返回，所以如果cookie记录中有一条记录1的name包含另一条记录2的name，并且记录1的位置在记录2的前面，那么查找记录2的时候将会找到记录1。  
比如：记录1：”username=123456”，记录2：”name=xiaoming”  
那么在获取记录2时将会获取到记录1  
所以在命名的时候需要注意，尽量不要和曾经有的记录的name相同。

## **将cookie用来保存登录状态** ##

那么cookie是如何保存登录状态的呢？

首先，在用户登录成功的时候，在后台会设置cookie值，用来保存用户的username，和identity（身份）

然后，在除了登录界面以外的所有界面，都会判断cookie中是否存在该用户的cookie，如果不存在就返回到登录界面，如果存在那么判断该身份是否具有访问该界面的权限，如果具有权限才可以继续访问，否则跳转到其他具有访问权限的界面。

下面是student.html界面对身份进行判断的代码：

var username;//登录用户的用户名
    var identify;//登录用户的身份
    
    //检查是否已登录和登录者的身份
    function checkIdentify() { 
        username = getCookie("username");
        if(username == null || username == "") {
            alert("please login first!");
            location.assign("login.html");//如果用户还未登录，那么返回登录界面
        } else {
            identify = getCookie("identify");
            if(identify == "teacher") {
       //如果登录的身份是教师
                alert("teacher can not visit student's page");
                location.assign("teacher.html");
            }
        }
    }
    //在页面加载之前就要进行登陆者身份判断
    checkIdentify();

由于后台还没写好![这里写图片描述][SouthEast]所以先用js来模拟cookie操作.

1.  首先是没有登录时
    
        setCookie("username", "", -1);
           setCookie("identify", "", -1);
    
    如果前面设置过cookie值，那么通过这两条语句，将cookie值无效化。
    
    这时，如果直接访问student.html就会这样：
    
    ![这里写图片描述][SouthEast 1]
    
    然后返回到登录界面
2.  然后尝试以teacher身份登录，访问学生界面，通过下面两行语句改变cookie值：
    
        setCookie("username", "201408010111", 1);
           setCookie("identify", "teacher", 1);
    
    这时，访问student.html就会这样：
    
    ![这里写图片描述][SouthEast 2]
    
    然后返回到teacher.html界面

**cookie的中文乱码问题：**  
使用`decodeURIComponent()`对中文进行处理

return decodeURIComponent(document.cookie.substring(c_start, c_end));

[Link 1]: http://blog.csdn.net/fangaoxin/article/details/6952954/
[SouthEast]: /images/20220615/7800790a9d1c40abbb625598bda1d2bd.png
[SouthEast 1]: /images/20220615/8e86218540c34cf496ce500ad114ed45.png
[SouthEast 2]: /images/20220615/9a382147126e40ada3a51ad1491e8464.png