平台token封装和说明

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 平台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()
    }
}


相关文章
|
12月前
|
缓存 小程序 前端开发
【Uniapp】小程序携带Token请求接口+无感知登录方案2.0
【Uniapp】小程序携带Token请求接口+无感知登录方案2.0
300 0
uniapp 如何封装uni.request请求(登录接口、业务接口)
uniapp 如何封装uni.request请求(登录接口、业务接口)
uniapp 如何封装uni.request请求(登录接口、业务接口)
|
11月前
|
XML JSON 前端开发
jwt的使用概念工具类与切入spa项目
jwt的使用概念工具类与切入spa项目
77 0
|
JSON 安全 数据安全/隐私保护
Refresh Token的使用场景以及如何与JWT交互
在这篇文章中,我们将探索由OAuth2定义的Refresh Token的概念。我们将会明白为什么他们会这样做,以及他们如何与其他类型的Token进行比较。我们也将通过一个简单的例子来学习如何使用它们。
17897 0
|
8天前
|
存储 中间件 API
ThinkPHP 集成 jwt 技术 token 验证
本文介绍了在ThinkPHP框架中集成JWT技术进行token验证的流程,包括安装JWT扩展、创建Token服务类、编写中间件进行Token校验、配置路由中间件以及测试Token验证的步骤和代码示例。
ThinkPHP 集成 jwt 技术 token 验证
|
2月前
如何在apifox中全局定义token
如何在apifox中全局定义token
57 0
|
11月前
|
存储 中间件 API
fastadmin框架token验证
fastadmin框架token验证
267 0
|
12月前
|
缓存 小程序 NoSQL
【Uniapp】小程序携带Token请求接口+无感知登录方案
【Uniapp】小程序携带Token请求接口+无感知登录方案
254 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装1
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装1
58 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装2
前端学习笔记202305学习笔记第二十二天-登录页校验封装和token封装2
56 0