前端鉴权之 Session-Cookie

239 阅读2分钟

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

前端的鉴权(authentication)是一个经典的后台管理系统中必不可少的场景。鉴权其实就是权限控制,不同的用户携带不同的角色或用户权限,根据携带的权限信息来控制是否可操作某个功能点。

一般来说,控制权限对于模块菜单的访问,直接隐藏无权限的菜单部分就可以。如果需要更细致的权限限制,比如新增、修改、删除等功能按钮的权限,需要定义好权限相关的结构。

下面来说一说前端在鉴权过程中使用到的方法之一:Session-Cookie。(除此之外还有 JSONP、CORS、Token ...)

Session-Cookie

Session-Cookie 是一种前后端通信认证模式。

  • Session 会话属于服务端,可以设置过期时间。操作过程中可以将 session 的标识符传送到客户端
  • Cookie 属于客户端(浏览器端),是一小段存储在浏览器端的文本数据

Cookie 可以做什么:

可以进行会话管理(登陆、购物车等场景记录)、个性化(比如记录用户偏好、主题颜色、国际化配置等)、追踪(记录和分析用户行为)。 发送请求的时候,在浏览器报文中的 header 部分 Set-Cookie(将 cookie 从服务器发送到用户代理)

image.png

由于 HTTP 是无状态协议,服务器无法判断用户的身份, Session 可以存储客户端在同一个会话期间的一些操作记录

Session Cookie:信息是以键值对(key, value)的形式,如未设置过期时间,则会随着浏览器关闭而消失;如果设置了过期时间,会在过期后自动清除。

跨域问题

浏览器是通过 document.domain 属性来检查两个页面是否同源,因此只要通过设置相同的 document.domain ,两个页面就可以共享 Cookie(适用于主域相同,子域不同的场景)