首页 > 其他分享 >JS登录密码基于token和CryptoJS加密处理方法

JS登录密码基于token和CryptoJS加密处理方法

时间:2022-11-17 20:44:38浏览次数:34  
标签:加密 登录 JS token let CryptoJS data

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还在有效期内,不需要重新登陆

标签:加密,登录,JS,token,let,CryptoJS,data
From: https://www.cnblogs.com/felixzh/p/16900877.html

相关文章

  • day34 JSTL标签
    JSTL标签<!--写在jsp文件的最前--><!--JSTL标签库是一个JSP标签的集合,封装了许多jsp应用程序通用的核心功能prefix="c"标签库的别名是c--><%@tagliburi="http://......
  • js判断对象是否为数组的方法
    1.使用Array.isArray()方法,推荐letarr=[1,2,3,4]console.log(Array.isArray(arr))//true 2.使用Object.prototype.toString.call()方法,该方法不仅能判断......
  • JSR303校验
    JSR303校验记得添加依赖包<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency......
  • js中innerHTML和createElement的效率比较
    结合js中字符串不可变的特性单次执行innerHTML和createElement时效率差不多如果重复执行,因为innerHTML=字符串,需要多次开辟空间存储字符串,所以createElement效率更高.......
  • 使用 JWT 生成 token
    JWT简介JWT:JsonWebToken官网:https://jwt.io优点:可生成安全性较高的token且可以完成时效性的检验(登陆过期检查)JWT结构:(由官网获取)JWT生成token添加......
  • node __dirname is not defined in ES module scope in JS
    在es模块中使用__dirname时,会报错The"__dirnameisnotdefinedinESmodulescope"erroroccurswhenwetrytotrytousethe__dirnameglobalvariableinanES......
  • nextjs中代理请求到指定域名
    在next.config.js中,通过配置rewritesfallback来把请求代理到指定域名module.exports={...asyncrewrites(){return{fallback:[{......
  • nextjs window is not defined
    问题原因,nextjs是服务端渲染的,在服务器预渲染HTML,然后发送到客户端进行渲染。因此在服务端渲染时,是获取不到浏览器对象window/document等dynamic动态导入组件home.jsex......
  • python字典类型与 json数据转换
    一、json是什么json是轻量级的数据交换格式,是各种编程语言互通的桥梁。是一个约定好的标准,如有人用java,有人用PHP去开发一个系统,但是这两种语言不能直接互通,那就需要先转......
  • js取整数、取余数的方法
    取整1.取整//丢弃小数部分,保留整数部分parseInt(5/2)//2 2.向上取整//向上取整,有小数就整数部分加1Math.ceil(5/2)//3 3.向下取整//向下......