平台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 组件库
770 0
|
编解码 JavaScript 前端开发
jsQR 一个完全独立的javascript 二维码识别库
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
jsQR 一个完全独立的javascript 二维码识别库
|
12月前
|
SQL DataWorks 搜索推荐
DataWorks产品评测与最佳实践体验报告
DataWorks是阿里巴巴云推出的一款高效数据处理平台,通过内置的数据集成工具和ETL功能,实现了多源数据的自动化处理与分析。本文介绍了DataWorks在用户画像分析中的应用实践,展示了其如何帮助企业高效管理数据资源,支持决策制定及营销优化。同时,文章还评测了DataWorks的产品体验,包括开通流程、功能满足度等方面,并与其它数据开发平台进行了比较,突出了DataWorks在易用性、性能和生态完整性上的优势。最后,对Data Studio新版本中的Notebook环境进行了初步探索,强调了其在提升开发效率方面的价值。
392 16
|
Web App开发 前端开发 JavaScript
React的内存回收方式有哪些
【7月更文挑战第15天】 React内存管理依赖JS的垃圾回收,利用标记-清除算法释放无用对象。组件卸载时,通过`componentWillUnmount`(类组件)或`useEffect`(函数组件)执行清理。Hooks如`useMemo`和`useCallback`减少不必要的内存分配。避免内存泄漏的关键是及时清理副作用和资源。使用Chrome DevTools进行内存分析可提升性能和应用稳定性。
486 7
|
开发工具
java.lang.unsatisfiedlinkerror解决方法
java.lang.unsatisfiedlinkerror解决方法
1552 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
1350 0
|
前端开发 JavaScript 开发者
React craco 详细使用与介绍(类似 Vue 外抛的 vue.config.js)
React craco 详细使用与介绍(类似 Vue 外抛的 vue.config.js)
2698 0
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
14735 2
使用 JavaScript 获取 URL 参数的详细指南
|
搜索推荐 数据安全/隐私保护
战斧指纹浏览器与IPXProxy海外代理IP配置详解
对于需要管理多个电商平台店铺的用户而言,战斧指纹浏览器提供了便捷的多账号隔离功能。跨境电商卖家要想在海外顺利的管理自己的店铺,还需要用到海外代理IP来实现IP隔离,确保店铺之间互相独立,不会受到其他店铺的牵连。下面以IPXProxy海外代理IP为例,给大家带来战斧指纹浏览器集成IPXProxy海外代理IP的详细指南。
612 0
|
Android开发
Android 弹窗优先级管理,赶紧拿去用吧
Android 弹窗优先级管理,赶紧拿去用吧

热门文章

最新文章