token原理
Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位
为什么要用token
可以解决哪些问题呢?
- Token 完全由应用管理,所以它可以避开同源策略
- Token 可以避免 CSRF 攻击(dwz.cn/7joLzx)
- Token 可以是无状态的,可以在多个服务间共享
Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化(比如存入数据库),那它就是一个永久的身份令牌。
时序图表示
使用token和refresh token的时序图如下:
1. 登录
auth封装采用的是aes加密,用的是crypto-js这个库
"crypto-js": "^4.0.2"
封装处理加密和解密
- 文件路径src/utils/aes.ts
import CryptoJS from 'crypto-js' export default { /** * 加密 * @param { string } data 需要加密的值 * @param { string } keyStr key值(盐值) * @param { string } iv 密钥偏移量 */ encrypt(data, keyStr) { let key = CryptoJS.enc.Utf8.parse(keyStr) const srcs = CryptoJS.enc.Utf8.parse(data), encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }) return encrypted.toString() }, /** * 解密 * @param { string } data 需要加密的值 * @param { string } keyStr key值(盐值) * @param { string } iv 密钥偏移量 */ decrypt(data, keyStr) { const key = CryptoJS.enc.Utf8.parse(keyStr), decrypt = CryptoJS.AES.decrypt(data, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }) return CryptoJS.enc.Utf8.stringify(decrypt).toString() } }