登录时对于token的处理

Posted 2023-03-29

参考技术A 在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
1、用户输入账号密码，前端调后端的登陆接口，发送用户名和密码，
2、后端收到请求，验证用户名和密码，验证通过后（即登录成功），后端返回token给前端；
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面；
4、前端每次跳转路由，都要判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面（ 通过router.beforeEach((to, from, next)=>.....）)
5、每次调后端接口，都要在请求头中加上token；
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回编码401（编码由前台和后台约定好），请求头中没有token也返回编码401；
7、如果前端拿到状态码为401，则清除token信息并跳转到登录页面，并弹框提示用户当前缺少token或者token已失效，请重新登录；

一、调登录接口成功，在回调函数中将token存储到localStorage和vuex中
login.vue

store文件夹下的index.js

二、路由导航守卫
main.js

三、请求头加token，如果前端拿到状态码为401，就清除token信息并跳转到登录页面

单点登陆TOKEN的处理

参考技术A

API接口的安全性主要是为了保证数据不会被篡改和重复调用，实现方案主要围绕Token、时间戳和Sign三个机制展开设计。

1. Token授权机制
用户使用用户名密码登录后服务器给客户端返回一个Token（必须要保证唯一，可以结合UUID和本地设备标示），并将Token-UserId以键值对的形式存放在缓存服务器中（我们是使用Redis），并要设置失效时间。服务端接收到请求后进行Token验证，如果Token不存在，说明请求无效。Token是客户端访问服务端的凭证。

2. 时间戳超时机制
用户每次请求都带上当前时间的时间戳timestamp，服务端接收到timestamp后跟当前时间进行比对，如果时间差大于一定时间（比如30秒），则认为该请求失效。时间戳超时机制是防御重复调用和爬取数据的有效手段。
当然这里需要注意的地方是保证客户端和服务端的“当前时间”是一致的，我们采取的对齐方式是客户端第一次连接服务端时请求一个接口获取服务端的当前时间A1，再和客户端的当前时间B1做一个差异化计算（A1-B1=AB），得出差异值AB，客户端再后面的请求中都是传B1+AB给到服务端。

3. API签名机制
将“请求的API参数”+“时间戳”+“盐”进行MD5算法加密，加密后的数据就是本次请求的签名signature，服务端接收到请求后以同样的算法得到签名，并跟当前的签名进行比对，如果不一样，说明参数被更改过，直接返回错误标识。签名机制保证了数据不会被篡改。

4. 注意事项

5. 安全保障总结
在以上机制下，
如果有人劫持了请求，并对请求中的参数进行了修改，签名就无法通过；
如果有人使用已经劫持的URL进行DOS攻击和爬取数据，那么他也只能最多使用30s；
如果签名算法都泄露了怎么办？可能性很小，因为这里的“盐”值只有我们自己知道。