谈谈web项目中的凭证与依赖凭证

凭证或者token,是一种认证机制，相当于一把钥匙，有了它，才能打开特定的锁进入对应的门，这相当于增加了一层保护机制，过滤掉那些不合理的操作。

首先介绍下web项目中的一些token或认证类型，再简单举例在React项目中的使用。

web中的认证

还记得大学时期，第一次购物的场景激动的不得了，当时有个叫网盾的东西（建设银行的），usb连上电脑，通过认证才可支付，俗称网银盾。这个盾就提供了一层防护机制，只有环境安全了，才完成支付，就是一种认证。后来支付宝微信等二维码支付的流行也使网银盾，渐渐无人问津退出了主流。

玩过早期的梦幻西游的玩家都知道，梦幻西游在2006年代是相当火爆的，游戏的受欢迎决定账户潜在遭受攻击盗号风险的上升，于是网易出了个游戏令牌，该令牌一经激活就会开启周期性的登录密码随机生成模式。也是一种认证，只不过认证放到了服务端。

本文针对一种普遍的，开发关注比较多的过程：

• 登录请求至服务端，认证通过后获取token
• 每次request携带该token至服务端

凭证的存储与使用

拿到Token后需要存储在客户端
客户端的三种存储模式：

• cookie
  老牌存储机制，特点是可以装载至request header里发送，可以设置过期时间。
• sessionStorage
  相当于浏览器的一个tab，tab关闭存储即消失，特点是方便，无需关注过期时间。
• localStorage
  永久存储，没有过期时间，除非手动删除。

我们采用cookie存储，一方面凭证都有时效性，另一方面需要便携性，cookie天然具备这样的特性。

客户端和服务端都能写入cookie，区别是哪一方控制时效的问题。

依赖凭证

所谓依赖凭证是指需要根据一份信息来获取另一份信息，比如：
根据用户id获取该用户名下的所有资源列表

但是仅此还不够，依赖凭证必须是一份有一定时效性的信息，不易变性，当前用户的id不可能随意更改，除非登出logout.(在一个登陆周期内是不变的)

---

依赖凭证的存储

存入sessionStorage,每次请求依赖数据时：

• 先检查是否有存储
• 有直接取出，没有则重新请求，并将请求的结果存储

///user-ready.js
import User from '@/ajax/user'
function ReadyOrNot(){
	return new Promise((res,rej)=>{
		let userInfo = sessionStorage.getItem('userInfo');
		if(userInfo !== null){
			//依赖凭证有存储
			res(userInfo)
		}else{
			User.getUserInfo().then(res=>{
				if(res.statusCode === 200){
					//写入sessionStorage
					sessionStorage.setItem('userInfo',res.userInfo);
					res(res.userInfo)
				}
			})
		}
	})
}

//other.js
import Ready from './user-ready.js'
Ready().then(res => {
	//拿到依赖凭证数据,再请求下一个数据信息
})

总结

分析了两种凭证：一种token凭证，一种数据依赖凭证。