开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

掘友们大家好，小编在空闲的时间里，利用vue2和element-ui搭建了一个后台管理系统，其中在做登录页验证的时候，使用的技术体系就是Cookie，这篇文章给大家浅谈一下利用Cookie如何实现登录认证。

什么是 Cookie

Cookie简单点讲就是一些信息，我们将这些信息以文件的形式存储到浏览器本地中，每个信息都是独立的，我们可以在浏览器页面中获取Cookie，实现自动登录，或者存储登录账号和密码的存储。Cookie存储的大小是5kb，它是以键值对的形式存在的，在默认情况下，浏览器窗口关闭，Cookie就会失效，如果我们想要关闭窗口后，重新打开时Cookie也存在，那我们就需要设置Cookie的时间周期，浏览器读取Cookie，一旦超过设置的日期，Cookie就会删除，页面就会退出登录。

获取Cookie

小编这里以vue2为例，在路由router全局守卫beforeEach中获取Cookie信息，Cookie不存在，则直接跳转到哦啊登录页，用户重新的登录。Cookie存在，则直接获取用户信息，进入首页。

此处是小编在window窗口中创建了获取cookie的方法，并引入到了vue文件中，大家也可以通过window的原型链挂载自定义方法。

// 获取Cookie
window.getCookie = function (key){
    if(document.cookie.indexOf(key)<0){ return; }
    var cookies=document.cookie.split(";");
    for(var i=0; i<cookies.length; i++){
        var temp=cookies[i].split("=");
	if(temp[0].replace(/\s/g,'')==key){
            return decodeURIComponent(temp[1]);
	}
    }
}

获取Cookie信息，存在即登录，不存在，就跳转到登录页，这个是和Cookie设置的时间周期相关。

router.beforeEach((to, from, next) => {
    // 获取cookie
    let user_name = getCookie('user_name');
    let user_pass = getCookie('user_pass');
    if (user_name && user_pass) {
      next()
    } else {
      if (to.path == "/login") {
        next()
      } else {
        next({ name: 'login' })
      }
    }
});

如何存储Cookie

document.cookie = cookie，以键值对的形式存储Cookie。可以自定义设置Cookie时间周期。

window.setCookie = function (key, value, day) {
    var cookie = key + '=' + encodeURIComponent(value);
    if (day > 0) {
        var date = new Date();
        date.setDate(date.getDate() + day);
        cookie += ';expires=' + date;
    }
    document.cookie = cookie;
},

项目登录页展示

输入用户名以及密码后调用setCookie方法存储键值对。考虑到密码的安全性，大家可以使用base64进行编码存储。

setCookie("user_name", name, 7);  // user_name 键  name 值  7 设置过期时间 
setCookie("user_pass", pass, 7);

这个时候我们的用户登录信息就已经存储到浏览器中了，登录成功。

清楚Cookie

实现了自动登录效果，自然少不了退出登录。那么Cookie时间周期没有到，如何清空呢？同样原理，我们只需要更新Cookie的时间为-1，就可以删除存储信息。

退出系统，清除Cookie。

setCookie("user_name", '', -1);
setCookie("user_pass", '', -1);

结尾

以上就是小编在搭建登录页时的交互逻辑。希望对大家有所帮助，有需要的小伙伴也可以参考一下。当然，浏览器存储还有其他的方法，各有各的好处。