基于cookie的登陆验证与退出

看到信息里面有这样一条疑问：

是一个关于关于cookie登陆退出的问题。问题原文为：怎么实现退出登陆，页面跳转到登陆页面，前端登陆后，后端返回字段设置cookie 就可以实现身份认证，但是这个cookies 应该是设置了httponly 字段，不允许前端js操作的，那点击退出按钮怎么应该做什么

首先先解决这样一个疑问，就是不论cookie有没有设置httponly属性，登陆或者退出时候的cookie都不应该由js来操作。具体原因后面会说。

网站发送登陆请求之后，在响应头中通过Set-Cookie来设置cookie，浏览器接收到响应后，会将Set-Cookie中的cookie信息存储到浏览器，如图：

此时查看浏览器的application 如图：

这是登陆的情况，那退出呢？这时有些朋友认为，点击退出按钮，或者进行退出操作，直接调用js删除cookie不就可以了吗，一般的项目中是不会这样操作的，删除cookie也是通过后端来实现。既然后端可以通过Set-Cookie设置cookie，那么也应该可以通过Set-Cookie删除cookie，所以一般的项目接口文档中都会有一个退出接口api。

当前端向这个退出api发送请求时，响应头中的Set-Cookie一般会将登陆时设置的cookie（PHPSESSID）的expires属性设置成一个过期时间。这样浏览器解析这个Set-Cookie时就将PHPSESSID删除掉了。

当向这个退出接口发送信息的时候，看看network会响应什么呢，如图：

再看看appliaction的显示结果：

那为什么不可以用前端的js删除cookie呢，这里就涉及到了session信息，当你登陆网站后，后端服务器将一个cookie返回给前端，并且会在后端数据库存储一个cookie，这两个cookie是相同的，每次退出后两个cookie都应该删除，这就需要前端向后端发送一个删除cookie的请求，服务器接受到请求后删除cookie，并在响应头中设置如下信息。

浏览器接受到以上信息，根据expires字段信息判断cookie过期（1970年就过期了），将cookie删除。这样两个cookie就都删除了。

如果只是用前端js将cookie手动清除，后端依然保存着cookie，造成资源浪费，当然还有一些其他的弊端，这里不做赘述。