引言

客户端初始化访问登录服务时，需要以账号和密码作为参数请求后台接口，此时后台响应会展示出详细的账号和密码，为了提高安全性，一般需要对响应中的密码进行加密处理。在这里主要是总结了rsa加密方法。

一、安装`jsencrypt`

npm i jsencrypt

二、引入`jsencrypt`

在 main.js 文件中引入 jsencrypt

import JSEncrypt from "jsencrypt"; //引入模块
Vue.prototype.$jsEncrypt = JSEncrypt; //配置全局变量

三、获取公钥（调接口）

export function getPubKey(data) {return http({url: "/index/pub-key", //每个项目的接口url不一样 根据实际情况修改method: "GET", // 同理data});
}

四、引入`getPubKey`

在需要加密的组件中引入getPubKey接口，然后进行账号或者密码加密。下面是以登录页面账号、密码加密为例。

1、在login.vue文件中引入getPubKey

import { getPubKey } from "@/api"; //每个项目路径都会有区别

2、登陆时加密

 getPubKey().then(({ result, data: keyData }) => { // getPubKey---获取公钥接口if (result) {const jse = new this.$jsEncrypt(); // 实例化一个 jsEncrypt 对象jse.setPublicKey(keyData); //配置公钥let userAccount = jse.encrypt(this.loginForm.user); //加密账号let passWord = jse.encrypt(this.loginForm.password); //加密密码login({userAccount: userAccount,passWord: passWord,}).then(({ result, message }) => {if (result) {console.log("登录成功");// 登录成功后的操作} else {// 登录失败操作this.loginTextError = message;}});}});

Vue项目中rsa加密相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...
vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...

Vue项目中rsa加密

引言

一、安装`jsencrypt`

二、引入`jsencrypt`

三、获取公钥（调接口）

四、引入`getPubKey`

Vue项目中rsa加密相关推荐

最新文章

热门文章