平台token封装和说明

简介: 平台token封装和说明

token原理



Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位


为什么要用token



可以解决哪些问题呢?


  1. Token 完全由应用管理,所以它可以避开同源策略
  2. Token 可以避免 CSRF 攻击(dwz.cn/7joLzx)
  3. 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()
    }
}


相关文章
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
884 0
|
编解码 JavaScript 前端开发
jsQR 一个完全独立的javascript 二维码识别库
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
jsQR 一个完全独立的javascript 二维码识别库
|
5月前
|
机器学习/深度学习 人工智能 数据可视化
白血病细胞检测系统(YOLOv8+PyQt5)源码分享
本项目基于 YOLOv8 搭建了一个白血病细胞识别系统,并通过 PyQt5 图形界面 实现了可视化操作,涵盖了从 模型训练、推理检测到界面化应用 的完整流程。与传统的人工观察相比,该系统能够显著提升细胞识别的 效率与准确性,并为科研人员和医学教学提供了便捷工具。
|
9月前
|
JavaScript 前端开发 持续交付
实际工作中 Git Commit 代码提交规范是什么样的?
实际工作中 Git Commit 代码提交规范是什么样的?
824 7
|
开发工具
java.lang.unsatisfiedlinkerror解决方法
java.lang.unsatisfiedlinkerror解决方法
1628 1
|
前端开发 JavaScript
react-qr-code的第三方库来将URL转换成二维码图片
在React中,你可以使用一个叫做react-qr-code的第三方库来将URL转换成二维码图片并保存。首先,你需要安装这个库: ``` npm install react-qr-code ``` 然后,在你的组件中引入react-qr-code: ``` import QRCode from 'react-qr-code'; ``` 接着,在render方法中使用QRCode组件,将URL作为一个属性传递进去: ``` render() { const url = 'https://www.example.com'; return ( <div> <Q
1478 0
|
前端开发 JavaScript 开发者
React craco 详细使用与介绍(类似 Vue 外抛的 vue.config.js)
React craco 详细使用与介绍(类似 Vue 外抛的 vue.config.js)
2840 0
|
Web App开发 前端开发 JavaScript
React的内存回收方式有哪些
【7月更文挑战第15天】 React内存管理依赖JS的垃圾回收,利用标记-清除算法释放无用对象。组件卸载时,通过`componentWillUnmount`(类组件)或`useEffect`(函数组件)执行清理。Hooks如`useMemo`和`useCallback`减少不必要的内存分配。避免内存泄漏的关键是及时清理副作用和资源。使用Chrome DevTools进行内存分析可提升性能和应用稳定性。
548 7
|
SQL 人工智能 运维
在阿里云日志服务轻松落地您的AI模型服务——让您的数据更容易产生洞见和实现价值
您有大量的数据,数据的存储和管理消耗您大量的成本,您知道这些数据隐藏着巨大的价值,但是您总觉得还没有把数据的价值变现出来,对吗?来吧,我们用一系列的案例帮您轻松落地AI模型服务,实现数据价值的变现......
678 3
|
传感器 安全 Java
汇编语言基础教程
汇编语言基础教程

热门文章

最新文章