前言

作为前后端分离登陆，这一部分只要是前端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做登陆和请求认证的校验，登陆逻辑也将补全。