Vue或其他框架的一些配置

vuex 数据持久化

所需的 npm 包

"secure-ls": "^1.2.6", // 用于加密
"vuex-persistedstate": "^4.1.0" // 用于vuex数据持久化

store

import Vue from "vue";
import Vuex from "vuex";
import SecureLS from "secure-ls";
import persistedState from "vuex-persistedstate";

const files = require.context("./modules", false, /\.js$/);
let modules = {};
files.keys().forEach((key) => {
  let name = path.basename(key, ".js");
  modules[name] = files(key).default || files(key);
});

const ls = new SecureLS({
  encodingType: "aes", //加密类型
  isCompression: false, //是否压缩
  encryptionSecret: "encryption", //PBKDF2值  加密秘密
});

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules,
  plugins: [
    persistedState({
      key: "inpackStore",
      // 需要持久化的modules,不填默认全部
      paths: ["test"],
      // 具体内容参考官网 localStorage、cookie等持久化方式
      storage: {
        getItem: (key) => ls.get(key),
        setItem: (key, value) => ls.set(key, value),
        removeItem: (key) => ls.remove(key),
      },
    }),
  ],
});

query 加密

当我们通过 url 传参时,可以进行简单的加密

router.js

import Vue from "vue";
import VueRouter from "vue-router";
import { stringifyQuery, parseQuery } from "@/tools/query";

import Home from "@/views/Home.vue";

const routes = [
  {
    path: "/",
    redirect: "/index",
    name: "Home",
    component: Home,
  },
];

const router = new VueRouter({
  mode: "hash", // history
  stringifyQuery: stringifyQuery, // 序列化query参数
  base: process.env.BASE_URL,
  routes,
});

export default router;

query.js

import base64 from "./base64";
const { encode: encrypt, decode: decrypt } = base64;

const encodeReserveRE = /[!'()*]/g;
const encodeReserveReplacer = (c) => "%" + c.charCodeAt(0).toString(16);
const commaRE = /%2C/g;

const encode = (str) =>
  encodeURIComponent(str)
    .replace(encodeReserveRE, encodeReserveReplacer)
    .replace(commaRE, ",");

const decode = decodeURIComponent;

/**
 * 判断字符串是否是base64
 * @param { string } str
 * @returns { boolean }
 */
function isBase64(str) {
  if (str === "" || str.trim() === "") {
    return false;
  }
  try {
    return btoa(atob(str)) == str;
  } catch (err) {
    return false;
  }
}

/**
 * 序列化对象 并加密
 * @param {Object} obj
 */
export const stringifyQuery = (obj) => {
  const res = obj
    ? Object.keys(obj)
        .map((key) => {
          const val = obj[key];

          if (val === undefined) {
            return "";
          }

          if (val === null) {
            return encode(key);
          }

          if (Array.isArray(val)) {
            const result = [];
            val.forEach((val2) => {
              if (val2 === undefined) {
                return;
              }
              if (val2 === null) {
                result.push(encode(key));
              } else {
                result.push(encode(key) + "=" + encode(val2));
              }
            });
            return result.join("&");
          }

          return encode(key) + "=" + encode(val);
        })
        .filter((x) => x.length > 0)
        .join("&")
    : null;

  return res ? `?${encrypt(res)}` : "";
};

/**
 * 解密  反序列化字符串参数
 * @param {String}} query
 */
export const parseQuery = (query) => {
  const res = {};
  query = query.trim().replace(/^(\?|#|&)/, "");
  if (!query) {
    return res;
  }
  // 解密
  query = isBase64(query) ? decrypt(query) : query;
  query.split("&").forEach((param) => {
    const parts = param.replace(/\+/g, " ").split("=");
    const key = decode(parts.shift());
    const val = parts.length > 0 ? decode(parts.join("=")) : null;

    if (res[key] === undefined) {
      res[key] = val;
    } else if (Array.isArray(res[key])) {
      res[key].push(val);
    } else {
      res[key] = [res[key], val];
    }
  });
  return res;
};

base64.js

const Base64 = {
  //加密
  encode(str) {
    return btoa(
      encodeURIComponent(str).replace(
        /%([0-9A-F]{2})/g,
        function toSolidBytes(match, p1) {
          return String.fromCharCode("0x" + p1);
        }
      )
    );
  },
  //解密
  decode(str) {
    // Going backwards: from bytestream, to percent-encoding, to original string.
    return decodeURIComponent(
      atob(str)
        .split("")
        .map(function (c) {
          return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
        })
        .join("")
    );
  },
};
export default Base64;

prod 环境去除 console.log

// "babel-plugin-transform-remove-console": "^6.9.4",

// babel.config.js
// 适用于生产环境的babel插件
const prodPlugin = [];

if (process.env.NODE_ENV !== "development") {
  // 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  prodPlugin.push([
    "transform-remove-console",
    {
      exclude: ["error", "warn"],
    },
  ]);
}

module.exports = {
  presets: ["@vue/app"],
  plugins: [...prodPlugin],
};