前端分享和单点登录使用cookies

cookiecookie英文是什么？在计算机术语中，它是指服务器存储在客户端的一段数据。这段数据会在客户端每次发起http请求时，自动添加到http请求报文中的header中；当服务器响应时，它可以设置cookie并将cookie添加到http响应消息的头部。MDN中对cookie的解释是：cookie是一个请求头，里面包含了之前服务器通过Set-Cookie头服务的HTTPcookies，存储在客户端。Cookies一般存储在对应的域名下，每个浏览器对中一个域名下存储的cookies数量和大小不同。下表是不同浏览器对cookies的存储要求：浏览器chromeSafariFirefoxienumber53unlimited5050size4097bytes4097bytes4097bytes4095bytesexcessprocessingremovetheoldestcookieremovetheoldestcookierandomlyremovethenewest所有浏览器都支持cookie功能，我们可以直接在浏览器中删除cookie和禁用cookie存储。chrome中的设置是：设置-高级-隐私设置和安全-内容设置-Cookies。如果我们在创建cookie时不设置过期时间，即不设置expires或max-age值，则cookie只存在于session中。此时cookie保存在浏览器的内存中，关闭浏览器后cookie自动消失。如果设置了过期时间，cookie将存储在用户的硬盘上。windowsOS下chrome的存放路径为C:DocumentsandSettingsAdministratorLocalSettingsApplicationDataGoogleChromeUserData，firefox的存放路径为：C:DocumentsandSettingsAdministratorLocalSettingsApplicationDataMozillaFirefoxProfilesznyzv8y6.defaultOfflineCachemac下chrome的存放路径为：~/library/applicationsgoogle/铬合金;Safari的存储路径为：~/library/cookies；cookies的工作原理我们知道http协议是一个无状态的协议。在Web应用中，数据交互是通过http协议进行的。交互完成后，客户端客户端与服务器端的连接断开。再次交互需要建立新的连接。这种连接无法记录用户的状态，cookie可以弥补HTTP协议无状态的不足。服务器给客户端发一个通行证，无论谁来访，都必须带上自己的通行证，这样服务器才能从通行证上确认客户端的身份。这就是cookie的工作原理。上图展示了cookies的工作原理：(1)当用户第一次登录时，输入用户名和密码信息，服务器收到后会进行用户认证。(2)服务端验证通过后，生成一个token，以cookie的形式放入http的响应头中，一起返回给客户端。(3)浏览器根据是否设置了cookie的过期时间来判断cookie是sessioncookie还是permanentcookie，并将cookie存储在不同的位置。(4)下次http请求时，请求头中会自动携带存储的cookie。(5)服务器根据请求头中cookie中的token确认用户的身份信息。常见问题前端主动跨域向后端发送cookie在解释这个问题之前，先了解一下什么是跨域。两个域之间是否存在跨域问题，主要根据协议、域名、端口号来判断。只要有区别，就是跨域。例如：(1)不同的协议：http://www.baidu.com和https://www.baidu.com(2)不同的域名：http://www.baidu.com和http://www.google.com(3)端口号不同：http://www.baidu.com:8080和http://www.baidu.com:8000默认情况下，浏览器不能主动跨域发送cookies到后台，并且需要在前端请求时添加配置项{withCredentials:true}。jquery:$.ajax({url:'myurl',method:'GET',xhrFields:{withCredentials:true},success:function(){}});角：$http.get(url,{withCredentials:true}})axios:axios.defaults.withCredentials=true前端配置好后，需要在后端配置：添加配置项"Access-Control-Allow-Credentials","true""Access-Control-Allow”在响应头-Origin”,”yourdomain”还有一些中间件可以帮助我们解决跨域问题，比如express中的express-cors，或者koa方法属性前端cookie中的koa-corssetting:document.cookie='company=eoitek;max-age=10000;domain=eoitek.com;path=/;secure'其中max-age是cookie的过期时间，是一个相对时间，单位ofvalue是seconds，是相对于cookie创建后多少秒才过期的，类似max-age的配置属性是expires，其值为date对象的toUTCString()格式，即Thu，21Sep201806:10:38GMT，指cookie过期的绝对时间。如果max-age和expires都存在，则max-age优先级高。domain是我们设置cookie存放的域，如果不设置就是当前主机的域。path是指存放cookie的目录，默认为当前文件的存放目录。secure，添加该配置项指定cookie只能通过https协议传输。读取：document.cookie读取本域可获取的所有cookie；格式为“=;=;”后端cookie设置（以node为例）：varhttp=require('http');http.createServer(function(req,res){res.setHeader('status','200OK');res.setHeader('Set-Cookie','name=binbinfang;path=/;max-age=1000;domain=eoitek.com');res.setHeader('Access-Control-Allow-Origin','eoitek.com');res.setHeader('Access-Control-Allow-Credentials','true');res.write('HelloWorld');res.end();}).listen(8888);console.log('runninglocalhost:8888');backendcookies比frontendcookies多了两个配置项：httpOnly：带有HttpOnly属性的Cookies不能通过Document.cookie属性、XMLHttpRequest和RequestAPIs使用JavaScript访问，防止跨站脚本攻击（XSS）；SameSite=StrictSameSite=Lax允许服务器设置一个cookie不随跨域请求一起发送，可以在一定程度上防止跨站请求伪造攻击（CSRF）。注意事项(1)保存中文cookie如果需要保存中文cookie，需要对中文进行UTF-8编解码，即通过encodeUriComponent()和decodeUriComponent()。(2)保存图片和安全证书二进制图片和安全证书也可以保存在cookie中，需要进行base64编码保存。但是，建议不要将此类文件保存在cookie中。(3)要更新cookie，只要key；小路;domain是一致的，可以通过改变key对应的值来更新cookie的值。(4)cookies的删除cookies只能更新，不能删除。如果要删除一个cookie，可以通过更新设置cookie的max-age=0。(5)cookie的安全设置cookie时加上secure。Cookie以字符串的形式设置和赋值。所以原生cookie的操作比较麻烦，可以借助一些js库来方便我们的操作，包括cookies.js和js-cookiecookie的跨域获取以及单点登录的问题。例如www.google.com域名无法在www.baidu.com中操作获取cookies，因为他们的一级域名不同。但是，cookies可以在二级域中共享和修改。即www.baidu.com和baike.baidu.com之间可以共享cookies。据此，可以实现单点登录。单点登录：多个不同的系统集成到一个统一的加载平台。用户登录任意一个系统后，可以访问统一加载的所有系统。登录后，用户的权限和信息不再受限于某个系统。即使某个系统出现故障（包括统一加载平台），其他系统仍然可以正常使用。这就需要将用户权限等信息保存到客户端，不受服务端的限制。例如，我们有两个站点都需要用户身份验证。为了实现单点登录，我们可以将它们的一级域名设置成相同的，比如主站点设置为eoitek.test，子站点设置为sharplook.eoitek。测试。创建cookie时，设置domain=.eoitek.test;path=/;实现两个域名之间的cookie共享。如果将认证信息的token放在cookie中，就可以实现单点登录。//eoitek.test站点从'cookiesjs'导入cookie；exportdefault{name:'agent',mounted(){cookies({'fullname':null,'company':null});if(!cookies('fullname')){cookies({fullname:'binbin',company:'eoitek'},{expires:100*24*3600,domain:'.eoitek.test',path:'/'});}}}可以看出我们设置的两个cookie在两个站点都可以访问到，实现了跨域访问cookie和单点登录。