Vue封装路由跳转方法，vue-router对query传参进行加密解密

1.引入库crypto-js

npm install crypto-js
1

2.封装加密、解密方法crypto.js文件，根据自己开发习惯，放在工具类utils文件夹即可（直接复制）

const CryptoJS = require("crypto-js"); //引用AES源码js

const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse("ABCDEF1234123412"); //十六位十六进制数作为密钥偏移量

//加密方法
function Encrypt(word) {
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.ciphertext.toString().toUpperCase();
}

//解密方法
function Decrypt(word) {
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = CryptoJS.AES.decrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

const desKey = CryptoJS.enc.Utf8.parse("1");

//DES加密方法
function desEncrypt(message) {
  let encrypted = CryptoJS.DES.encrypt(message, desKey, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
}
//DES解密方法
function desDecrypt(ciphertext) {
  if (ciphertext === "" || ciphertext === null || ciphertext === undefined) {
    return "";
  }
  if (typeof ciphertext != "string") {
    ciphertext = ciphertext.toString();
  }
  //为解决返回url自动把加密转义
  ciphertext = ciphertext.replace(/%2F/g, "/");
  ciphertext = ciphertext.replace(/%20/g, "+");
  ciphertext = ciphertext.replace(/ /g, "+");
  ciphertext = ciphertext.replace(/%3D/g, "=");
  var decrypted = CryptoJS.DES.decrypt(
    {
      ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
    },
    desKey,
    {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }
  );
  return decrypted.toString(CryptoJS.enc.Utf8);
}

export default {
  Encrypt,
  Decrypt,
  desEncrypt,
  desDecrypt
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

3.引入到router文件里并使用。（不要直接复制，里面有我自己的代码）

注：注意标注的地方才是加密解密相关代码

import Vue from "vue";
import Router from "vue-router";
import commonRouter from "./modules/common"; // 公共路由
import shoppingRouter from "./modules/shopping"; // 首页路由
import loginRouter from "./modules/login"; // 登录路由
Vue.use(Router);

// 加密解密开始
import crypto from "../utils/crypto"; // 引入
function deepCopy(obj) {
  if (obj instanceof Object) {
    const newObj = {};
    if (Array.isArray(obj)) {
      const arr = [];
      obj.forEach(item => {
        arr.push(deepCopy(item));
      });
      return arr;
    } else {
      for (const key in obj) {
        const value = obj[key];
        if (typeof value === "function") {
          newObj[key] = value.bind(newObj);
        } else if (typeof value === "object") {
          if (Array.isArray(value)) {
            newObj[key] = [];
            value.forEach(item => {
              newObj[key].push(deepCopy(item));
            });
          } else {
            newObj[key] = deepCopy(value);
          }
        } else {
          newObj[key] = value;
        }
      }
    }
    return newObj;
  } else {
    return obj;
  }
}

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject);
  // 解决空对象中含有{__ob__: Observer}，深拷贝
  let newLocation = deepCopy(location);
  // let newLocation = location
  if (newLocation?.query && Object.keys(newLocation.query).length !== 0) {
    newLocation = location.query?.__params
      ? location
      : {
          ...location,
          query: {
            __params: crypto.Encrypt(JSON.stringify(newLocation.query))
          }
        };
  }
  return originalPush.call(this, newLocation);
};

const originalRoe = Router.prototype.resolve;
Router.prototype.resolve = function resolve(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalRoe.call(this, location, onResolve, onReject);
  // 解决空对象中含有{__ob__: Observer}，深拷贝
  let newLocation = deepCopy(location);
  // let newLocation = location
  if (newLocation?.query && Object.keys(newLocation.query).length !== 0) {
    newLocation = location.query?.__params
      ? location
      : {
          ...location,
          query: {
            __params: crypto.Encrypt(JSON.stringify(newLocation.query))
          }
        };
  }
  return originalRoe.call(this, newLocation);
};
// 加密解密结束


export const constantRouterMap = [
  ...commonRouter,
  ...shoppingRouter,
  ...loginRouter,
  {
    path:
      "/eGK7KbU4gs8xA4Uy-4NH42ten01820HFBXB5XoHwkUVKTsgfWTz6FmpkR0gO9ESR8wd-&eaid-b32aa700081C4C00000564C26251",
    component: () => import("@/app/shop/views/list.vue"),
    name: "list"
  }
];

export default new Router({
  mode: "history", // require service support
  // 浏览器回退,切换路由时默认滚动的位置
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRouterMap
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

4.main.js全局引入，注入原型prototype。

import crypto from "@/basa/utils/crypto";
Vue.prototype.$crypto = crypto;
1
2

5.主页通过watch监听路由并解密参数，一般是App.vue或者Layout.vue，也就是app-main标签放置的页面

<template>
  <div>
    <div class="ccui-app-wrapper">
      <div class="ccui-main-container">
        <!-- 应用导航 -->
        <!--<el-top-nav-menu-3
          ref="topNavMenu"
          :subMenu="menu"
          :appTitle="appTitle"
          :companyTitle="companyTitle"
          dashboard=""
          class="no-print"
          @onSubmitSkip="onJump"
          @ccuiHelp="appHelp"
          :logo="orgLogo"
        >
        </el-top-nav-menu-3>-->

        <!-- 内容区 -->
        <app-main
          class=""
          style="min-height: auto; margin-left: 0;line-break: anywhere;"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

watch: {
    $route(to, from) {
      this.setMenuInit();
    },
    "$route.query": {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.__params) {
          const newQuery = this.$crypto.Decrypt(val.__params);
          // 在vue原型上定义一个
          Vue.prototype.$route_query = JSON.parse(newQuery);
          return;
        }
        Vue.prototype.$route_query = val || {};
      }
    }
  },
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

6.页面中使用取值

// 路由跳转传参
this.$router.push({
path: "/viewNoticeSimpleDetail",
  query: {
    id:123
  },
});
// 加密前接收参数
this.$route.query.id // 123

// 加密后接收参数
this.$route_query.id // 123
1
2
3
4
5
6
7
8
9
10
11
12