月份：2021年1月

解决方案

加密解决方案

此方案就算源码泄露，内容也不会泄露，且能够一次性完成全部post接口加密。前端使用加密库：rsa（jsencrypt），3des（crypto-js）

客户端向后端传输加密

采用整体post加密方案。

项目打开时是动态生成3des秘钥
发送请求时用3des给明文加密
用rsa加密3des秘钥
被加密的秘钥随请求传给后端，此秘钥可以放在headers中
后端接收3des秘钥，用rsa私钥解密
用解密后的3des秘钥给密文解密

后端向客户端传输加密

每个接口判断headers中是否有3des秘钥标识
若有获取此标识用另一个rsa私钥解密获得后端的3des秘钥
用3des秘钥给密文解密

遇到问题

前端公钥解密不了3des经过java私钥加密过的秘钥

前端用私钥来解密，后端生成另一个公钥来加密，后端的公钥不会暴露。

前端解不了后端加的密

看手否是同一种加密模式，是否是同一种填充方案，输出的是UTF-8还是BASE64

标签 3des, rsa, 加密方案

svg

svg sprite

文章作者由zhuishao
发布日期 2021年1月12日
svg sprite无评论

给svg文件一个名字，方便vue使用svg

文件存放地址

src->assets->svg-icons

qi ye wei xin jie tu 16104356734716 - svg sprite

在项目中引入文件

src->assets->svg-icons->index.js

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./icons', false, /\.svg$/);
requireAll(req);
export default req;

main.js

import '@/assets/svg-icons';

对引入的svg文件进行配置

vue.config.js

function resolve(dir) {
  return path.join(__dirname, dir);
}
const vueConfig = {
  chainWebpack: (config) => {
    // svg
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.include
      .add(resolve('src/assets/svg-icons/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'e2-[name]',
      })
      .end();
};
module.exports = vueConfig;

做一个svg组件然后引用

<template>
  <svg aria-hidden="true"
    class="svg-icon">
    <use :xlink:href="icon"></use>
  </svg>
</template>

<script>
export default {
  name: 'e2-svg',
  props: {
    name: {
      type: String,
      required: true,
    },
  },
  computed: {
    icon() {
      return `#e2-icon_${this.name}`;
    },
  },
};
</script>
<style scoped>
  .svg-icon{
    width:1em;
    height:1em;
    vertical-align:-.09em;
    margin-right:.2em;
  }
</style>

如何使用

<e2-svg name="burse"></e2-svg>

注意事项：name不是icon_burse,因为经过webpack处理，svg文件暴露除了id=“e2-icon_burse”,组件上用的是e2-icon_${this.name}，所以name=“burse”

CSS

凹形文字凸形文字生成

前置学习

ui工程师会给我们rgb颜色值，若要制作一个凹形或凸形文字需要另一个相对颜色作为文字或背景颜色。所以rgb转hsl。

fc13b9d7fe908945256576c87e621ebf - 凹形文字凸形文字生成

凹形文字

浅色背景深色文字底部加上浅色投影

.x{
            display:flex;
            justify-content:center;
            align-items: center;
            color:hsl(210,13%,30%);
            background-color:hsl(210,13%,60%);
            text-shadow:0 .03em .03em hsla(0,0%,100%, .8);
        }

凸形文字

深色背景浅色文字顶部加上深色投影

.y{
            display:flex;
            justify-content:center;
            align-items: center;
            color:hsl(210,13%,60%);
            background-color:hsl(210,13%,30%);
            text-shadow:0 -.03em .03em hsla(0,0%,0%, .8);
        }

标签文字