凭证或token,是一种认证机制，相当于一把钥匙，能打开特定的锁进入对应的门，这相当于增加了一层保护机制，过滤掉那些不合理的操作。
这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战
首先介绍下web项目中的一些token或认证类型，再简单举例在React项目中的使用。
什么是认证
还记得大学时期，第一次购物的场景激动的不得了，当时有个叫网盾的东西（建设银行的），usb连上电脑，通过认证才可支付，俗称网银盾。这个盾就提供了一层防护机制，只有环境安全了，才完成支付，就是一种认证。后来支付宝微信等二维码支付的流行也使网银盾，渐渐无人问津退出了主流。
玩过早期的梦幻西游的玩家都知道，梦幻西游在2006年代是相当火爆的，游戏的受欢迎决定账户潜在遭受攻击盗号风险的上升，于是网易出了个游戏令牌，该令牌一经激活就会开启周期性的登录密码随机生成模式。也是一种认证，只不过认证放到了服务端。
web项目里凭证也是同样的道理：
- 登录请求至服务端，认证通过后获取token
- 每次request携带该token至服务端
我们这里主要讨论凭证的存储与消费
凭证的分类
拿到Token后需要存储在客户端 客户端的三种存储模式：
- cookie 老牌存储机制，特点是可以装载至request header里发送，可以设置过期时间。
- sessionStorage 相当于浏览器的一个tab，tab关闭存储即消失，特点是方便，无需关注过期时间。
- localStorage 永久存储，没有过期时间，除非手动删除。
我们采用cookie存储，一方面凭证都有时效性，另一方面需要便携性，cookie天然具备这样的特性。
客户端和服务端都能写入cookie，区别是哪一方控制时效的问题。
凭证的检查
///user-ready.js
import User from '@/ajax/user'
function ReadyOrNot(){
return new Promise((res,rej)=>{
///localStorage\Cookie皆可
let userInfo = localStorage.getItem('userInfo');
if(userInfo !== null){
//依赖凭证有存储
res(userInfo)
}else{
User.getUserInfo().then(res=>{
if(res.statusCode === 200){
//写入sessionStorage
localStorage.setItem('userInfo',res.userInfo);
res(res.userInfo)
}
})
}
})
}
//other.js
import Ready from './user-ready.js'
Ready().then(res => {
//拿到凭证数据,再请求下一个数据信息
})
最后
感谢阅读，谢谢！
