前端鉴权

629 阅读5分钟

前言

在大部分web项目中,用户登录、权限管理都是非常基础、核心的功能,这次就来总结一下目前常用的鉴权方式。

Cookie

首先来看一下MDN中cookie的定义

HTTP Cookie(也叫 Web Cookie 或浏览器 Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie 主要用于以下三个方面:

会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息) 个性化设置(如用户自定义设置、主题等) 浏览器行为跟踪(如跟踪分析用户行为等)

简单来说cookie就是保存在浏览器中的一段数据,当前端使用ajax进行网络请求时,只要设置credentials属性,就可以在请求头中自动携带cookie信息。

了解了cookie的基本定义后,我们来看一下前端如何使用cookie来进行鉴权。

在现代的系统鉴权方式中,cookie一般搭配session来使用。Session 是一种记录客户端和服务端会话状态的机制。

当用户输入用户名和密码进行登录时,前端调用登录api,服务端会生成一个session id用来记录这个用户的登录状态,这个session id可以作为最简单的cookie来使用,登录的网络请求会把这个session id 作为cookie传回前端,前端会把这个cookie储存在浏览器中,然后请求其他网络请求时携带这个cookie,服务端就可以识别出哪个用户在进行操作,这个用户的登录情况的信息。

当然,实际的操作中,不仅仅是把session id 作为cookie,还可能会混入其他信息并且进行加密。

cookie-session 这种鉴权登录体系的缺点有以下几个方面:

  • 如果有多个服务器的话,在其中一个服务器登录生成session,其他服务器无法共享,需要通过建立一个session数据库等手段来解决
  • 服务端需要记录用户的登录状态,如果登录用户量级过大,服务端开销会变多
  • 容易受到CSRF攻击
  • 跨域无法携带cookie

Token

Token翻译过来就是令牌的意思,这个令牌中记录里用户的信息。Token的登录鉴权体系中,客户端每一次请求服务端都会携带上这个令牌,服务端看到Token就可以知道是哪个用户发来的请求,从而进行业务处理。

Token的生成和cookie类似,当客户端登录时,服务端根据用户的登录信息进行加密生成一段字符串作为Token,为了保证信息不被篡改,还会根据请求的数据生成对应的签名。

客户端登录后收到Token信息之后,在每次请求中携带Token,完成认证。

Tokencookie-session的鉴权方式相比:

  • 首先是服务端不必记录用户的登录状态,节省了一笔开销,而且有多个服务器的时候,也不用共享数据。
  • Token完全由应用管理,不依赖于浏览器,因此不受同源策略限制, 可以跨域。
  • 无法进行CSFR攻击

同时Token这种鉴权方式,因为会把用户的相关信息都加密存到Token中,每次服务端接收到请求后都会消耗一定的时间来解析Token,这算是一种额外的开销。

Token的登录体系中,为了保证安全,Token的过期时间一般设置的较短,通常只有一个或者几个小时,但是当Token过期后就要重新登录的话,体验就会很差。因此一般还会存在一个过期时间较长的refresh-token,当Token过期后会通过refresh-token来无感知的刷新Token。只有当refresh-tokenToken全部过期后,才需要重新登录。

路由权限管理

在用户登录进系统后,可能还会根据用户的角色来进行权限管理,这里简单分享一下路由的权限管理。

现在的前端项目,React或者Vue,无论是使用hash还是history的路由方式,总的来说都是会存在一个路由表的配置,根据路由配置来进行页面的跳转。

最简单的方式可能是根据权限隐藏掉页面的跳转链接,但是如果手动在地址栏输入URL还是会进入到没有权限的页面。

在此之上可以给每一个路由跳转的页面增加路由守卫,在跳转时判断是否有权限,没有权限会跳转到预先设置好的页面。

当然,这种方式还是比较繁琐,所以更合理的方案应该是动态生成路由表,动态生成路由表的功能放到前端或者后端都可以完成。如果放到后端,在登录后直接把根据权限生成的路由表传给前端,前端直接使用。如果由前端处理,那么后端把具体的用户角色信息返回给前端,前端根据权限生成路由表然后来使用。

总结

前端鉴权还有很多其他方式,比如jwt(其实也算Token的一种),OAuth(开放授权)等。cookie-sessionToken应该是最常用的两种,同样除了登录鉴权,还有路由权限管理,具体到业务细节上可能还有更具体的权限管控,实现的方式也各有不同。