vue裡面的鹽值加密

㈠ jsencrypt實現前端RSA非對稱加密解密（vue項目）

最近一個vue項目要求所有密碼數據需要使用RSA非對稱加密傳輸，以為挺簡單，結果開發過程中還是遇到了些問題，簡單做個筆記。同時也希望可以幫助到遇到同樣問題的道友門。

重點來了：使用jsencrypt實現RSA非對稱加解密
因為這里直接在前端加解密，所以需要一對現成的密鑰，我們通過 密鑰在線生成器 得到：

然後在需要使用的文件中引入JSEncrypt，我是將所有工具函數都封裝在一個js文件的，我就直接在該文件中引入，我看也有人是在main.js中引入的。

到這里我們的加密解密方法就完成了，在需要的地方直接拿過來用就好了！

大功告成！這樣就完了？我以為這樣就ok了。

當然，如果沒有遇到這個bug，就可以忽略下面的內容了。
從上面截圖可以看到，重啟項目的時候報錯： navigator is not defined
而且這個bug有點奇葩，先啟動項目再引入jsencrypt就什麼問題都沒有，但是先引入jsencrypt再啟動項目就報錯。這也是我前面能順利執行的原因所在。
通過好一通折騰，用了網上的各種方法，比如在main.js引入jsencrypt、引入jsdom之類的，都沒能解決這個問題，最終還是在jsencrypt的git相關 issue 下找到了這個問題的解決方案。

到這里問題就算基本解決了，但是由於項目組不止我一個前端，我不能要求每個同事或者以後接手維護項目的同事都要在node_moles中去替換文件。
所以就採用了另外一種方案：將jsencrypt.js通過在線js壓縮器壓縮至jsencrypt.min.js中，然後把jsencrypt.min.js放到src/assets/jsencrypt文件夾中，就不用npm install的方式了。
換了種方式，jsencrypt的引用方式需要做出相應的調整：

參考鏈接： RSA非對稱加密傳輸---前端加密&解密(VUE項目)
https://github.com/travist/jsencrypt/issues/144
PS：才疏學淺，如果有考慮不周之處或者有更好的解決方案，歡迎指正探討！

㈡ Vue3基礎-模板語法

如果我們希望把數據顯示到模板（template）中，使用最多的語法是 「Mustache」語法 (雙大括弧) 的文本插值。

並且我們前端提到過，data返回的對象是有添加到Vue的響應式系統 中，當data中的數據發生改變時，對應的內容也會發生更新。

當然，Mustache中不僅僅可以是data中的屬性，也可以是一個javaScript的表達式：

下面這種寫法是語句不是表達式，所以是錯誤的：

v-once用於指定元素或者組件只渲染一次，當數據發生變化時，元素或者組件以及其所有的子元素將視為靜態內容並且跳過，該指令可以用於性能優化。

如果添加到父節點，那麼所有的子節點也是只會渲染一次：

用於更新元素的 textContent，等價於"Mustache"語法，而且"Mustache"語法更靈活。

默認情況下，如果我們展示的內容本身是 html 的，那麼vue並不會對其進行特殊的解析。如果我們希望這個內容被Vue可以解析出來，那麼可以使用 v-html 來展示。

效果如下：

v-pre用於跳過元素和它的子元素的編譯過程，顯示原始的Mustache標簽。
跳過不需要編譯的節點，加快編譯的速度。

效果如下：

這個指令保持在元素上直到關聯組件實例結束編譯。

v-cloak 和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到組件實例准備完畢，主要用於解決閃動問題，現在Vue3一般不會出現這個問題了。

<div> 不會顯示，直到編譯結束。

前面講的一系列指令，主要是將值插入到模板內容中。但是，除了內容需要動態來決定外，某些屬性我們也希望動態來綁定。比如動態綁定a元素的href屬性，動態綁定img元素的src屬性。

綁定屬性我們使用 v-bind: ，縮寫 : ，用於動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。

v-bind用於綁定一個或多個屬性值，或者向另一個組件傳遞props值（這個學到組件時再介紹），在開發中，有哪些屬性需要動態進行綁定呢？還是有很多的，比如圖片的鏈接src、網站的鏈接href、動態綁定一些類、樣式等等。

v-bind有一個對應的語法糖，也就是簡寫方式，在開發中，我們通常會使用語法糖的形式，因為更簡潔。

注意 ：Vue2 template模板中只能有一個根元素，Vue3 template模板中允許有多個根元素。

在開發中，有時候我們的元素class也是動態的，比如：當數據為某個狀態時，字體顯示紅色，當數據另一個狀態時，字體顯示黑色。

綁定class有兩種方式：對象語法，數組語法。

① 對象語法：我們可以傳給 :class (v-bind:class 的簡寫) 一個對象，以動態地切換 class。

② 數組語法：我們可以把一個數組傳給 :class，以應用一個 class 列表；

我們可以利用v-bind:style來綁定一些CSS內聯樣式，這是因為某些樣式我們需要根據數據動態來決定，比如某段文字的顏色，大小等等。

CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名。

綁定style有兩種方式：對象語法，數組語法。

① 對象語法：

② 數組語法： :style 的數組語法可以將多個樣式對象應用到同一個元素上

在某些情況下，我們屬性的名稱可能也不是固定的。
前面我們無論綁定src、href、class、style，屬性名稱都是固定的，如果屬性名稱不是固定的，我們可以使用 :[屬性名]=「值」 的格式來定義，這種綁定的方式，我們稱之為動態綁定屬性。

如果我們希望將一個對象的所有屬性，綁定到元素上的所有屬性，應該怎麼做呢？非常簡單，我們可以直接使用 v-bind 綁定一個對象。

如下：info對象會被拆解成div的各個屬性。

前面我們綁定了元素的內容和屬性，在前端開發中另外一個非常重要的特性就是交互。
在前端開發中，我們需要經常和用戶進行各種各樣的交互，這個時候，我們就必須監聽用戶發生的事件，比如點擊、拖拽、鍵盤事件等等。

在Vue中如何監聽事件呢？使用v-on指令。接下來我們來看一下v-on的用法：

我們可以使用v-on來監聽一下點擊的事件：

v-on:click可以寫成@click，是它的語法糖寫法：

當然，我們也可以綁定其他的事件：

如果我們希望一個元素綁定多個事件，這個時候可以傳入一個對象：

當通過methods中定義方法，以供@click調用時，需要注意參數問題：

情況一：如果該方法不需要額外參數，那麼方法後的()可以不添加，並且方法的實現不用參數，直接就可以列印event。
情況二：如果需要同時傳入某個參數和event時，可以通過$event傳入事件，並且方法的實現必須按順序寫明參數。

@keyup.enter 代表enter鍵彈起的時候會調用onEnter方法，我們一般在方法裡面獲取輸入的值：

在某些情況下，我們需要根據當前的條件決定某些元素或組件是否渲染，這個時候我們就需要進行條件判斷了。

Vue提供了下面的指令來進行條件判斷：

下面我們來對它們進行學習。

v-if、v-else、v-else-if 用於根據條件來渲染某一塊的內容，這些內容只有在條件為true時，才會被渲染出來，這三個指令與JavaScript的條件語句 if、else、else if 類似。

v-if 的渲染原理：v-if是惰性的，當條件為false時，其判斷的內容完全不會被渲染或者會被銷毀掉，當條件為true時，才會真正渲染條件塊中的內容。

因為v-if是一個指令，所以必須將其添加到一個元素上，但是如果我們希望切換的是多個元素呢？
如果此時我們使用div包裹，div會被渲染到界面上來，但是我們並不希望div被渲染，這個時候，我們可以選擇使用template，template元素可以當做不可見的包裹元素，並且 v-if 可以添加到 template 上，但是最終template不會被渲染出來，類似於小程序中的block。

v-show和v-if的用法看起來是一致的，也是根據一個條件決定是否顯示元素或者組件。

首先，在用法上的區別：

其次，本質的區別：

開發中如何進行選擇呢？

在真實開發中，我們往往會從伺服器拿到一組數據，並且需要對其進行渲染。這個時候我們可以使用v-for來完成，v-for類似於JavaScript的for循環，可以用於遍歷一組數據。

v-for的基本格式是 "item in 數組" ，數組通常是來自data或者prop，也可以是其他方式，item是我們給每項元素起的一個別名，這個別名可以自定來定義。

我們知道，在遍歷一個數組的時候會經常需要拿到數組的索引，如果我們需要索引，可以使用格式 "(item, index) in 數組" ，注意順序，數組元素項item在前面，索引項index在後面。

類似於v-if，你可以使用 template 元素來循環渲染一段包含多個元素的內容。
我們使用template來對多個元素進行包裹，而不是使用div來完成，因為div會被渲染，template不會被渲染。而且如果有ul，ul裡面不推薦放div，只推薦放li。

Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新，這些被包裹過的方法包括：

上面的方法會直接修改原來的數組，所以視圖會跟著更新。但是某些方法不會替換原來的數組，而是會生成新的數組，比如 filter()、concat() 和 slice()，這時候我們可以通過重新賦值的方式觸發視圖更新，如下：

在使用v-for進行列表渲染時，我們通常會給元素或者組件綁定一個key屬性。

這個key屬性有什麼作用呢？
我們先來看一下官方的解釋：key屬性主要用在Vue的虛擬DOM演算法，在新舊nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素並且盡可能的嘗試就地修改/復用相同類型元素的演算法，而使用key時，它會基於key的變化重新排列元素順序，並且會移除/銷毀key不存在的元素。

官方的解釋對於初學者來說並不好理解，比如下面的問題：
什麼是新舊nodes，什麼是VNode？
沒有key的時候，如何嘗試修改和復用的？
有key的時候，如何基於key重新排列的？

我們先來解釋一下VNode的概念：
VNode的全稱是Virtual Node，也就是虛擬節點。事實上，無論是組件還是元素，它們最終在Vue中表示出來的都是一個個VNode。VNode的本質是一個JavaScript的對象。

如果我們不只是一個簡單的div，而是有一大堆的元素，那麼它們應該會形成一個VNode Tree。

我們先來看一個案例：這個案例是當我們點擊按鈕時會在li中間插入一個f。

我們可以確定的是，這次更新對於ul和button是不需要進行更新，需要更新的是我們li的列表。在Vue中，對於相同父元素的子元素節點並不會重新渲染整個列表，因為對於列表中 a、b、c、d它們都是沒有變化的。在操作真實DOM的時候，我們只需要在中間插入一個f的li即可。

那麼Vue中對於列表的更新究竟是如何操作的呢？
Vue事實上會對於有key和沒有key會調用兩個不同的方法，有key，那麼就調用 patchKeyedChildren方法，沒有key，那麼就調用 patchUnkeyedChildren方法。

沒有key的diff演算法：

我們會發現上面的diff演算法效率並不高，c和d來說它們事實上並不需要有任何的改動，但是因為我們的c被f所使用了，所有後續所有的內容都要一次進行改動，並且最後進行新增。

有key的diff演算法：

所以我們可以發現，Vue在進行diff演算法的時候，會盡量利用我們的key來進行優化操作，在沒有key的時候我們的效率是非常低效的，在進行插入或者重置順序的時候，保持相同的key可以讓diff演算法更加的高效。

㈢ vue把密鑰保存哪裡安全

首先:密鑰直接明文寫在代碼里是肯定不可取的!
將密鑰保存在文件中，如果是伺服器端的話，沒什麼大問題，你也可以直接將密鑰寫在代碼里。
不存儲密鑰，使用隨機密鑰，每次加密的時候的密鑰都不一樣，需要考慮的就是解密時怎麼取到生成的密鑰。可以加一些數據來生成密鑰，比如用戶名、用戶密碼什麼的。4.使用系統提供的密鑰容器，進行存儲密鑰，現在操作系統這么多，存儲容器的使用就自己去查看相關操作系統的文檔吧。
可以使用電子證書，當然證書你可以存儲在操作系統的密鑰容器上，或者其它介質中，看你的需要咯。
加強密鑰，就是使用多種加密演算法，把數據多加密幾次，把密鑰也加密了。這樣的話就是涉及到加密密鑰的密鑰要存儲在哪。

㈣ 前端加密、解密數據

首先，為了更好的加密，我們不能用簡單的加密，因為很有可能會被輕松破解掉，我之前實現的加密只是簡單的把數據加密，在測試過程中（安全性測試），通過一些技巧還是可以解密成功。

所以，對於一些重要的信息可能需要非對稱加密。

所謂的非對稱加密解密，在我的理解的，就是前端用一把鑰匙解密/加密，而後台用另一把鑰匙來做同樣的操作。

也就是，前端加密用特定的鑰匙，解密的鑰匙只在後端那裡。這樣在傳輸過程中就不會把鑰匙丟掉。

同樣，後端加密數據用一把鑰匙，解密的時候，前端自己有規定的鑰匙，這樣數據也不會在過程中解密截取。

1、我這里是用vue

所以，第一步 npm install jsencrypt

2、安裝完之後，開始定義一個專門用來加密解密的文件，我放到utils文件裡面。

引入JSEncrypt

3、重點來了加密解密

首先，我這里使用公鑰加密（由後台來給你公鑰）

全局引用，使用

這樣加密就完成了。

通常由後台加密，前端負責加密

由後台生成私鑰，然後前端用來解密。

引用和加密一樣

㈤ vue.js 怎麼設置md5加密

一，有關於JS md5加密：
下載包：
1：md5.js ；

2： md4.js ；

3： sha1.js。

二，使用MD5加密的方法：
下載md5.js文件，在網頁中引用該文件:

< script type="text/javascript" src="md5.js">< /script>

三，在你需要使用MD5加密的地方如此調用:

< script type="text/javascript" >
hash = hex_md5("input string");
< /script>

其他兩個演算法類似。

用javascript加密的好處是可以在客戶端完成加密之後傳送到服務端，
即可以減輕服務端負擔，也可以保證傳輸的安全。

㈥ vue中如何做加密登陸

1.首先要了解rsa加密的流程：

第一步返回publicKey前端，用來對喊胡輪password等敏感欄位的加密。

第二步，前端進行password敏感欄位的加密。

第三步post數據做鏈給後端。

第四步用publicKey與privateKey進行解密。

具體如下：

我們可以藉助elemetui的表單驗證，如下： 

submitForm(formName) {

        this.$refs[formName].validate((valid) => {

          if (valid) {

（在這里請求我的後台加密公鑰和私鑰）

然鄭信後對我的登錄密碼進行rsa加密： let password = RSA(this.publicKeyMolus, this.logUserInfo.password, this.publicKeyExponent)

（ranhou

          } else {

            console.log('error submit!!');

            return false;

          }

        });