IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> JS 之 项目中登录密码加密与token处理 -> 正文阅读

[开发工具]JS 之 项目中登录密码加密与token处理

目录

1.登录前先请求,获取一个token

2.使用登录token,通过CryptoJS给password加密

3.解密(后端完成即可)

4.登录

5.在请求拦截中设置,每次请求时带上token

6.后端拿到token


1.登录前先请求,获取一个token,也可以在本地写死

暂且叫登录token,用来给登录时密码的加密

async getToken(){
    const {data:token} = await getToken()         
    // token : eaaaaaaaaaIUzI1NiJ9.eyJ1aWQiOiJDRTY3,例如这样的
    this.token = token
}

2.使用登录token,通过CryptoJS给password加密

ps:当然要和后端商量好.? ?npm i crypto-js

// 记得导入
let CryptoJS = require('crypto-js');



// 规定截取登录token的多少位
let key = CryptoJS.enc.Utf8.parse(this.token.substr(0, 30));
// 拿到登录时输入的密码
let srcs = CryptoJS.enc.Utf8.parse(this.password);
// 加密方式
let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
});

let data = {
    name:this.name,
    // 这样即可完成加密
    password:encrypted.toString(),
    token:this.token
}

// 请求登录即可
this.goLogin(data)

3.解密(后端完成即可)

ps: key和配置信息一定要沟通成完全一样,才能解密成功

// pwd 即为加密后的密码。 例如 5CSUSaG2vhvoITJESgTR6A==

let key = CryptoJS.enc.Utf8.parse(this.token.substr(0, 30));

let decrypted = CryptoJS.AES.decrypt(this.pwd, key, {
     mode: CryptoJS.mode.ECB,
     padding: CryptoJS.pad.Pkcs7
});


// 获得解密后的密码

let resPwd = decrypted.toString(CryptoJS.enc.Utf8)

4.登录

// 登录请求
async goLogin(data){
    const {data:res} = await goLogin(data)
    
    // 成功后,拿到用户token,把token写入session中
    window.sessionStorage.setItem('token', res.token);
    
}

5.在请求拦截中设置,每次请求时带上token

ajax.interceptors.request.use(config => {
  // headers加参数
  let token = window.sessionStorage.getItem('token');
  config.headers.common['x-access-token'] = token;
  return config;
},(error) => {
  console.log(erroe)
});

6.后端拿到token

解密token获得userId , 根据需要 返回前端需要的数据

用户下次再请求时 , 如果token还在有效期内,不需要重新登陆

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-04-26 11:58:27  更:2022-04-26 11:58:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 15:15:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码