Springboot + vue前后端分离后台管理系统(九) -- 登陆实现(一)
前言作为前后端分离登陆,这一部分只要是前端vue的登陆,在原先vue-admin-template的封装的登陆上面做改动。步骤实现RSA加密登陆密码肯定是不能明文暴露浏览器上,登陆表单提交的时候必须进行加密,这边采用RSA对称加密,生成私钥和公钥,登陆的密码公钥加密,后端再用私钥进行解密,然后进行登陆校验。安装依赖npm install jsencrypt --save新建rsa.js编写一个加密
前言
作为前后端分离登陆,这一部分只要是前端vue的登陆,在原先vue-admin-template的封装的登陆上面做改动。
步骤实现
RSA加密
登陆密码肯定是不能明文暴露浏览器上,登陆表单提交的时候必须进行加密,这边采用RSA对称加密,生成私钥和公钥,登陆的密码公钥加密,后端再用私钥进行解密,然后进行登陆校验。
安装依赖
npm install jsencrypt --save
新建rsa.js
编写一个加密的方法
import { JSEncrypt } from 'jsencrypt'
export function encode(publicKey, data) {
let encryptor = new JSEncrypt();
encryptor.setPublicKey(publicKey);
return encryptor.encrypt(data);
}
生成RSA公私钥
生成RSA密钥的网站很多,随便找一个,https://www.bejson.com/enc/rsa/ , sample-admin设为私钥的key.
公钥放在前端项目里
在vue项目 src/store/moudles/user.js, 把公钥放在那。
在全部里存储 src/store/getter.js
登陆表单提交加密
src/views/login/index.vue文件
修改前:
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
修改后:
引入rsa.js
import {encode} from '@/utils/rsa'
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
const username = encode(
this.$store.getters.publicKey,
this.loginForm.username
);
const password = encode(
this.$store.getters.publicKey,
this.loginForm.password
);
this.$store
.dispatch("user/login", { username: username, password: password })
.then(() => {
this.$router.push({ path: this.redirect || "/" });
this.loading = false;
})
.catch(() => {
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
},
对比一下加密前后表单提交
加密前:
加密后:
生成的私钥存储在后端
privateKey: MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEAxd9XFwmrzVFLxPVjiX7bzvfDgbwtDcW/3f8LSBgbulJgUE18+w1aYRE8cdY2NVCGXbwZeyte00mki71nhO3R9QIDAQABAkAFeVE6dO0IyAf1kehIBHdmOVpyO1dvuxm8tXKFcw1JUTOcEEAOixcTqelKulRwNm8J3hJgfv7Rs9G1HiTKlW+9AiEA6vtdLftgt83/KbQ9Cb0TcU+fw7SZOe85cKiXAWDMGUcCIQDXkj2HgkQOxTL6yYNDjN9J0oH3X0ygxKBP/tjAICVY4wIgXQWVJZbV+u15jbDkWO6Yu8qhnH/qCJ1DR+31mX4QThECIGwgRgx6InjmILP574UqW7VDiTzy6BSbi22UflOfzBvRAiBk0dDPt5w8L/GUPb009dwKoyc4SbbnPJMPt5W/VbjuVg==
后端简单登陆逻辑
引入hutool工具包
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.5.7</version>
</dependency>
新建LoginService.java
public interface LoginService {
/**
* 用户登陆
* @param user
* @return
*/
ResResult doLogin(User user);
}
新建LoginService.java 实现类 LoginServiceImpl.java
@Service
@Log4j2
public class LoginServiceImpl implements LoginService {
@Value("${privateKey}")
private String privateKey;
@Override
public ResResult doLogin(User user) {
if (StrUtil.isEmpty(user.getUsername()) || StrUtil.isEmpty(user.getPassword())) {
return ResResult.failure(ResResultCode.BIZ_ERROR);
}
// hutool提供的工具类,创建RSA加密对象,私钥key为参数
RSA rsa = new RSA(privateKey, null);
// 私钥解密
String username = rsa.decryptStr(user.getUsername(), KeyType.PrivateKey);
String password = rsa.decryptStr(user.getPassword(), KeyType.PrivateKey);
log.info("解密后的用户名:" + username);
log.info("解密后的密码:" + password);
return ResResult.success();
}
}
新建LoginController.java
@RestController
public class LoginController {
@Autowired
private LoginService loginService;
@PostMapping("/login")
public ResResult login(User user) {
return loginService.doLogin(user);
}
}
前后端调测
修改vue项目src/api/user.js 的login接口请求url为/login
启动项目进入登陆页面,进行登陆请求
那么问题来了 哈哈,跨域了!
解决它!
在前端vue项目的vue.config.js里添加代理配置
devServer: {
port: port,
open: false, // 这个配置是关掉项目启动自动在浏览器打开项目
overlay: {
warnings: false,
errors: true
},
proxy: {
"/server-url": {
target: "http://localhost:8181/formwork",
changeOrigin: true,
pathRewrite: { "^/server-url": "/" }
}
}
},
修改.env.development文件的BASE_API为我们的重写路径server-url
重启项目再次 试一下登陆
密码再次输入123456qq测试
结尾
这篇文章实现基本前后端登陆通信,前端密文加密等,后端解密。下一篇文章将集成shiro做登陆和请求认证的校验,登陆逻辑也将补全。
更多推荐
所有评论(0)