平台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()
    }
}


相关文章
|
消息中间件 存储 缓存
RabbitMQ之消息应答和持久化
【1月更文挑战第11天】 一、消息应答 1.概念 2.自动应答 3.消息应答方法 4.Multiple 的解释 5.消息自动重新入队 6.消息手动应答代码 7.手动应答效果演示 二、RabbitMQ持久化 1.概念 2.队列如何实现持久化 3.消息实现持久化 4.不公平分发 5.预取值
451 72
|
Web App开发 XML Java
SpringMVC使用MultipartResolver和MultipartFile实现文件上传
SpringMVC使用MultipartResolver和MultipartFile实现文件上传
1505 0
|
Web App开发 前端开发 JavaScript
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
825 0
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
|
8月前
|
API 开发工具 Android开发
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
257 23
【01】完整开发即构美颜sdk的uni官方uts插件—让所有开发者可以直接使用即构美颜sdk的能力-优雅草卓伊凡
|
11月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
465 1
|
开发工具
java.lang.unsatisfiedlinkerror解决方法
java.lang.unsatisfiedlinkerror解决方法
1354 1
|
11月前
|
前端开发 UED 开发者
uni-app:去除导航栏&跨域的问题&blobe查看图片&v-deep&页面操作 (五)
本文介绍了几个前端开发技巧:1) 如何通过设置 `navigationStyle` 为 `custom` 去除顶部导航;2) 解决跨域问题的方法,包括使用 `dotenv` 加载全局变量和配置 `devServer` 的代理;3) 使用 Blob 和 FileReader 查看图片;4) 利用 `v-deep` 深度作用选择器修改样式;5) 修改页面左上角返回按钮的行为。
426 0
|
JavaScript 前端开发 C++
使用 Vue-Cli 创建 Vue3+TS 项目并整合 ElementPlus、Axios 等组件或插件
本文详细记录了如何使用Vue-Cli工具创建一个Vue3+TypeScript项目,并整合ElementPlus组件库和Axios等插件,包括项目的创建、配置、启动和插件封装使用等步骤。
681 0
六个好看实用的html简单登录页面源码
六个好看实用的html简单登录页面源码
1977 0
六个好看实用的html简单登录页面源码
|
JavaScript
tab选项卡切换时echarts无法正常加载显示问题的解决方案
tab选项卡切换时echarts无法正常加载显示问题的解决方案
853 0