文章目录
一、前言
最近需要为项目做鉴权,前端框架vue,使用axios,后端框架koa2,前后端做了跨域。
考虑到项目应用场景,选择session-cookie方式做鉴权。下面将简略介绍一下实现原理,使用步骤,以及可能出现的bug。
一、权限控制
前后端分离前,页面通过后台渲染。前后端分离后,页面元素及页面路由由前端控制,后端提供接口。
前端的权限控制主要有三种方式:路由控制、视图控制、请求控制,这些方式能够满足普通用户的使用需求,但从安全的角度考虑,仍存在绕过前端直接向后端接口发送请求的方式,因此后端仍需验证每个接口,即鉴权。目前前后端配合的鉴权方式有以下三种:
- session-cookie
- Token验证(JWT)
- OAuth(开放授权)
第三种用于开放授权场景,例如QQ授权登录第三方网站,第二种安全性较高,不占服务器存储空间,但会对服务器性能以及带宽造成负担,本项目由于涉及到协作功能,对服务器性能和带宽要求较高,而且只涉及到浏览器,没有多客户端,因此最终我们选择了第一种方式。
二、实现原理
cookie
浏览器客户端与服务器之间通过http协议进行数据传递,但它本身是一个无状态协议,因此服务器无法区分不同的浏览器,需要人为提供一个标识,用以表明浏览器的身份、状态,这就是cookie的作用。cookie保存在浏览器本地,每次对服务器发起http请求的时候都在请求头中带上该域名下的cookie信息,比如
- 会话状态管理(如用户登录状态、购物车信息)
- 个性化设置(如用户自定义设置、主题等)
- 浏览器行为跟踪(如跟踪分析用户行为,淘宝的商品推荐)
- 用户身份(如权限较高的页面,普通用户无法访问)
以下来自 MDN 的官方解释
HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
session
session