前后端敏感数据加密方案及实现_03

小鱼儿 2023-01-21 05:22 28阅读 0赞

### 文章目录 ###

*   *   *   *   *   *  1. vue 部分
                     *  2. 前端工具 部分
                     *  3. 后端控制层
                     *  4. 后端逻辑层

###### 1. vue 部分 ######

<template>
      <div class="login">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <h3 class="title">若依后台管理系统</h3>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: 63%"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img"/>
            </div>
          </el-form-item>
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
        
        <div class="el-login-footer">
          <span>Copyright © 2018-2021 ruoyi.vip All Rights Reserved.</span>
        </div>
      </div>
    </template>
    
    <script>
    import {  getCodeImg } from "@/api/login";
    import Cookies from "js-cookie";
    import {  encrypt, decrypt } from '@/utils/jsencrypt'
    
    export default { 
      name: "Login",
      data() { 
        return { 
          codeUrl: "",
          cookiePassword: "",
          loginForm: { 
            username: "admin",
            password: "admin123",
            rememberMe: false,
            code: "",
            uuid: ""
          },
          loginRules: { 
            username: [
              {  required: true, trigger: "blur", message: "用户名不能为空" }
            ],
            password: [
              {  required: true, trigger: "blur", message: "密码不能为空" }
            ],
            code: [{  required: true, trigger: "change", message: "验证码不能为空" }]
          },
          loading: false,
          redirect: undefined
        };
      },
      watch: { 
        $route: { 
          handler: function(route) { 
            this.redirect = route.query && route.query.redirect;
          },
          immediate: true
        }
      },
      created() { 
        this.getCode();
        this.getCookie();
      },
      methods: { 
        getCode() { 
          getCodeImg().then(res => { 
            this.codeUrl = "data:image/gif;base64," + res.img;
            this.loginForm.uuid = res.uuid;
          });
        },
        getCookie() { 
          const username = Cookies.get("username");
          const password = Cookies.get("password");
          const rememberMe = Cookies.get('rememberMe')
          this.loginForm = { 
            username: username === undefined ? this.loginForm.username : username,
            password: password === undefined ? this.loginForm.password : decrypt(password),
            rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
          };
        },
        handleLogin() { 
          this.$refs.loginForm.validate(valid => { 
            if (valid) { 
              this.loading = true;
              if (this.loginForm.rememberMe) { 
                Cookies.set("username", this.loginForm.username, {  expires: 30 });
                Cookies.set("password", encrypt(this.loginForm.password), {  expires: 30 });
                Cookies.set('rememberMe', this.loginForm.rememberMe, {  expires: 30 });
              } else { 
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove('rememberMe');
              }
              this.$store.dispatch("Login", this.loginForm).then(() => { 
                this.$router.push({  path: this.redirect || "/" }).catch(()=>{ });
              }).catch(() => { 
                this.loading = false;
                this.getCode();
              });
            }
          });
        }
      }
    };
    </script>
    
    <style rel="stylesheet/scss" lang="scss">
    .login { 
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      background-image: url("../assets/images/login-background.jpg");
      background-size: cover;
    }
    .title { 
      margin: 0px auto 30px auto;
      text-align: center;
      color: #707070;
    }
    
    .login-form { 
      border-radius: 6px;
      background: #ffffff;
      width: 400px;
      padding: 25px 25px 5px 25px;
      .el-input { 
        height: 38px;
        input { 
          height: 38px;
        }
      }
      .input-icon { 
        height: 39px;
        width: 14px;
        margin-left: 2px;
      }
    }
    .login-tip { 
      font-size: 13px;
      text-align: center;
      color: #bfbfbf;
    }
    .login-code { 
      width: 33%;
      height: 38px;
      float: right;
      img { 
        cursor: pointer;
        vertical-align: middle;
      }
    }
    .el-login-footer { 
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
    }
    .login-code-img { 
      height: 38px;
    }
    </style>

###### 2. 前端工具 部分 ######

jsencrypt.js

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
    
    // 密钥对生成 http://web.chacuo.net/netrsakeypair
    
    const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
      'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
    
    const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
      '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
      'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
      'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
      'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
      'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
      'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
      'UP8iWi1Qw0Y='
    
    // 加密
    export function encrypt(txt) { 
      const encryptor = new JSEncrypt()
      encryptor.setPublicKey(publicKey) // 设置公钥
      return encryptor.encrypt(txt) // 对数据进行加密
    }
    
    // 解密
    export function decrypt(txt) { 
      const encryptor = new JSEncrypt()
      encryptor.setPrivateKey(privateKey) // 设置私钥
      return encryptor.decrypt(txt) // 对数据进行解密
    }

###### 3. 后端控制层 ######

package com.ruoyi.web.controller.system;
    
    import java.util.List;
    import java.util.Set;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RestController;
    import com.ruoyi.common.constant.Constants;
    import com.ruoyi.common.core.domain.AjaxResult;
    import com.ruoyi.common.core.domain.entity.SysMenu;
    import com.ruoyi.common.core.domain.entity.SysUser;
    import com.ruoyi.common.core.domain.model.LoginBody;
    import com.ruoyi.common.core.domain.model.LoginUser;
    import com.ruoyi.common.utils.ServletUtils;
    import com.ruoyi.framework.web.service.SysLoginService;
    import com.ruoyi.framework.web.service.SysPermissionService;
    import com.ruoyi.framework.web.service.TokenService;
    import com.ruoyi.system.service.ISysMenuService;
    
    /**
     * 登录验证
     * 
     * @author ruoyi
     */
    @RestController
    public class SysLoginController
    { 
        @Autowired
        private SysLoginService loginService;
    
        @Autowired
        private ISysMenuService menuService;
    
        @Autowired
        private SysPermissionService permissionService;
    
        @Autowired
        private TokenService tokenService;
    
        /**
         * 登录方法
         * 
         * @param loginBody 登录信息
         * @return 结果
         */
        @PostMapping("/login")
        public AjaxResult login(@RequestBody LoginBody loginBody)
        { 
            AjaxResult ajax = AjaxResult.success();
            // 生成令牌
            String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
                    loginBody.getUuid());
            ajax.put(Constants.TOKEN, token);
            return ajax;
        }
    
        /**
         * 获取用户信息
         * 
         * @return 用户信息
         */
        @GetMapping("getInfo")
        public AjaxResult getInfo()
        { 
            LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
            SysUser user = loginUser.getUser();
            // 角色集合
            Set<String> roles = permissionService.getRolePermission(user);
            // 权限集合
            Set<String> permissions = permissionService.getMenuPermission(user);
            AjaxResult ajax = AjaxResult.success();
            ajax.put("user", user);
            ajax.put("roles", roles);
            ajax.put("permissions", permissions);
            return ajax;
        }
    
        /**
         * 获取路由信息
         * 
         * @return 路由信息
         */
        @GetMapping("getRouters")
        public AjaxResult getRouters()
        { 
            LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
            // 用户信息
            SysUser user = loginUser.getUser();
            List<SysMenu> menus = menuService.selectMenuTreeByUserId(user.getUserId());
            return AjaxResult.success(menuService.buildMenus(menus));
        }
    }

###### 4. 后端逻辑层 ######

package com.ruoyi.framework.web.service;
    
    import javax.annotation.Resource;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.security.authentication.AuthenticationManager;
    import org.springframework.security.authentication.BadCredentialsException;
    import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
    import org.springframework.security.core.Authentication;
    import org.springframework.stereotype.Component;
    import com.ruoyi.common.constant.Constants;
    import com.ruoyi.common.core.domain.model.LoginUser;
    import com.ruoyi.common.core.redis.RedisCache;
    import com.ruoyi.common.exception.CustomException;
    import com.ruoyi.common.exception.user.CaptchaException;
    import com.ruoyi.common.exception.user.CaptchaExpireException;
    import com.ruoyi.common.exception.user.UserPasswordNotMatchException;
    import com.ruoyi.common.utils.MessageUtils;
    import com.ruoyi.framework.manager.AsyncManager;
    import com.ruoyi.framework.manager.factory.AsyncFactory;
    
    /**
     * 登录校验方法
     * 
     * @author ruoyi
     */
    @Component
    public class SysLoginService
    { 
        @Autowired
        private TokenService tokenService;
    
        @Resource
        private AuthenticationManager authenticationManager;
    
        @Autowired
        private RedisCache redisCache;
    
        /**
         * 登录验证
         * 
         * @param username 用户名
         * @param password 密码
         * @param code 验证码
         * @param uuid 唯一标识
         * @return 结果
         */
        public String login(String username, String password, String code, String uuid)
        { 
            String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
            String captcha = redisCache.getCacheObject(verifyKey);
            redisCache.deleteObject(verifyKey);
            if (captcha == null)
            { 
                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
                throw new CaptchaExpireException();
            }
            if (!code.equalsIgnoreCase(captcha))
            { 
                AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
                throw new CaptchaException();
            }
            // 用户验证
            Authentication authentication = null;
            try
            { 
                // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
                authentication = authenticationManager
                        .authenticate(new UsernamePasswordAuthenticationToken(username, password));
            }
            catch (Exception e)
            { 
                if (e instanceof BadCredentialsException)
                { 
                    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
                    throw new UserPasswordNotMatchException();
                }
                else
                { 
                    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage()));
                    throw new CustomException(e.getMessage());
                }
            }
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
            LoginUser loginUser = (LoginUser) authentication.getPrincipal();
            // 生成token
            return tokenService.createToken(loginUser);
        }
    }