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

我会带着你远行 2023-01-21 04:28 52阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70 2]

### 文章目录 ###

*   *   *   *   *   *  1. 环境
                     *  2. vue部分
                     *  3. 控制层
                     *  4. 工具类

###### 1. 环境 ######

<table> 
 <thead> 
  <tr> 
   <th>组件</th> 
   <th>版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>springboot2.4.0</td> 
   <td>后端框架</td> 
  </tr> 
  <tr> 
   <td>3.0.0</td> 
   <td>前端框架</td> 
  </tr> 
  <tr> 
   <td>vue-router</td> 
   <td>4.0.0-0</td> 
  </tr> 
  <tr> 
   <td>ant-design-vue</td> 
   <td>2.0.0-rc.3</td> 
  </tr> 
  <tr> 
   <td>vuex</td> 
   <td>4.0.0-0</td> 
  </tr> 
 </tbody> 
</table>

###### 2. vue部分 ######

<template>
      <a-layout-header class="header">
        <div class="logo">甲蛙知识库</div>
        <a-menu
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
        >
          <a-menu-item key="/">
            <router-link to="/">首页</router-link>
          </a-menu-item>
          <a-menu-item key="/admin/user" :style="user.id? {} : {display:'none'}">
            <router-link to="/admin/user">用户管理</router-link>
          </a-menu-item>
          <a-menu-item key="/admin/ebook" :style="user.id? {} : {display:'none'}">
            <router-link to="/admin/ebook">电子书管理</router-link>
          </a-menu-item>
          <a-menu-item key="/admin/category" :style="user.id? {} : {display:'none'}">
            <router-link to="/admin/category">分类管理</router-link>
          </a-menu-item>
          <a-menu-item key="/about">
            <router-link to="/about">关于我们</router-link>
          </a-menu-item>
          <a-menu-item key="/aliyun">
            <router-link to="/aliyun">阿里云优惠</router-link>
          </a-menu-item>
          <a-popconfirm
            title="确认退出登录?"
            ok-text="是"
            cancel-text="否"
            @confirm="logout()"
          >
            <a class="login-menu" v-show="user.id">
              <span>退出登录</span>
            </a>
          </a-popconfirm>
          <a class="login-menu" v-show="user.id">
            <span>您好：{ { user.name}}</span>
          </a>
          <a class="login-menu" v-show="!user.id" @click="showLoginModal">
            <span>登录</span>
          </a>
        </a-menu>
    
        <a-modal
          title="登录"
          v-model:visible="loginModalVisible"
          :confirm-loading="loginModalLoading"
          @ok="login"
        >
          <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="登录名">
              <a-input v-model:value="loginUser.loginName" />
            </a-form-item>
            <a-form-item label="密码">
              <a-input v-model:value="loginUser.password" type="password" />
            </a-form-item>
          </a-form>
        </a-modal>
      </a-layout-header>
    </template>
    
    <script lang="ts">
      import {  defineComponent, ref, computed } from 'vue';
      import axios from 'axios';
      import {  message } from 'ant-design-vue';
      import store from "@/store";
    
      declare let hexMd5: any;
      declare let KEY: any;
    
      export default defineComponent({ 
        name: 'the-header',
        setup () { 
          // 登录后保存
          const user = computed(() => store.state.user);
    
          // 用来登录
          const loginUser = ref({ 
            loginName: "test",
            password: "123456"
          });
          const loginModalVisible = ref(false);
          const loginModalLoading = ref(false);
          const showLoginModal = () => { 
            loginModalVisible.value = true;
          };
    
          // 登录
          const login = () => { 
            console.log("开始登录");
            loginModalLoading.value = true;
            loginUser.value.password = hexMd5(loginUser.value.password + KEY);
            axios.post('/user/login', loginUser.value).then((response) => { 
              loginModalLoading.value = false;
              const data = response.data;
              if (data.success) { 
                loginModalVisible.value = false;
                message.success("登录成功！");
    
                store.commit("setUser", data.content);
              } else { 
                message.error(data.message);
              }
            });
          };
    
          // 退出登录
          const logout = () => { 
            console.log("退出登录开始");
            axios.get('/user/logout/' + user.value.token).then((response) => { 
              const data = response.data;
              if (data.success) { 
                message.success("退出登录成功！");
                store.commit("setUser", { });
              } else { 
                message.error(data.message);
              }
            });
          };
    
          return { 
            loginModalVisible,
            loginModalLoading,
            showLoginModal,
            loginUser,
            login,
            user,
            logout
          }
        }
      });
    </script>
    
    <style>
      .logo { 
        width: 120px;
        height: 31px;
        /*background: rgba(255, 255, 255, 0.2);*/
        /*margin: 16px 28px 16px 0;*/
        float: left;
        color: white;
        font-size: 18px;
      }
      .login-menu { 
        float: right;
        color: white;
        padding-left: 10px;
      }
    </style>

###### 3. 控制层 ######

@PostMapping("/login")
        public CommonResp login(@Valid @RequestBody UserLoginReq req) { 
            req.setPassword(DigestUtils.md5DigestAsHex(req.getPassword().getBytes()));
            CommonResp<UserLoginResp> resp = new CommonResp<>();
            UserLoginResp userLoginResp = userService.login(req);
    
            Long token = snowFlake.nextId();
            LOG.info("生成单点登录token：{}，并放入redis中", token);
            userLoginResp.setToken(token.toString());
            redisTemplate.opsForValue().set(token.toString(), JSONObject.toJSONString(userLoginResp), 3600 * 24, TimeUnit.SECONDS);
    
            resp.setContent(userLoginResp);
            return resp;
        }
    
        @GetMapping("/logout/{token}")
        public CommonResp logout(@PathVariable String token) { 
            CommonResp resp = new CommonResp<>();
            redisTemplate.delete(token);
            LOG.info("从redis中删除token: {}", token);
            return resp;
        }

###### 4. 工具类 ######

md5.js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70]: /images/20221020/7e8f11f13d444f36bca107181db393bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70 1]: /images/20221020/e16be07861c543d78b06679962bc6c26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70 2]: /images/20221020/c014c97363d0474e99144e71256ed2b0.png