前言

最近學(xué)習(xí)了Vue3，這篇文章主要分享一下基于Vue3 + TypeScript的項目，利用Mock.js模擬后端數(shù)據(jù)，axios實現(xiàn)請求來完成一個登錄功能。

一、Vue3 + Element Plus + Mock.js + axios實現(xiàn)登錄功能

1.登錄頁面配置路由、編寫表單內(nèi)容

在router/index.ts中配置路由：

編寫登錄表單，el-form中綁定的數(shù)據(jù)要和下面定義的內(nèi)容保持一致。

效果如下：

2.編寫表單校驗規(guī)則

看下效果：

3.登錄觸發(fā)表單預(yù)驗證

這里利用Element Plus的form中的validate方法對整個表單進(jìn)校驗。
這個表單節(jié)點叫做ruleFormRef，由于setup中是沒有this的，我們不能像Vue2中，通過this.$refs.xxx來獲取節(jié)點。我們?nèi)etup中利用ref再重新定義一個相同名稱的變量就可以，然后，它們就會自動關(guān)聯(lián)起來。

點擊登錄就觸發(fā)校驗：

點擊登錄按鈕驗證一下：

4.Mock.js模擬登錄請求

關(guān)于Mock.js的使用，可以看一下之前記錄的博客Mock.js學(xué)習(xí)。在Mock.js中模擬一個post請求，第一個參數(shù)是攔截的請求路徑，第二個參數(shù)是攔截的請求方式，第三個參數(shù)是攔截之后的處理邏輯，回調(diào)函數(shù)中params就是請求體攜帶的參數(shù)。

然后在mock登錄請求中限制一下用戶名和密碼，兩者輸入正確才能獲取到token。token值利用Mock隨機(jī)函數(shù)中來生成。

5.Vue3引入使用axios

安裝axios，輸入如下命令即可：

npm install axios --save

在Vue3中按照了之前Vue2的寫法進(jìn)行引入掛載全局，會出現(xiàn)報錯。

Vue3的寫法如下：

直接在登錄頁面上引入axios，導(dǎo)入axios就可以直接使用啦~

然后調(diào)用一下Mock.js模擬的post登錄請求：

驗證一下：
輸入正確的賬號和密碼，就可以獲取到請求返回的數(shù)據(jù)，并且拿到token。

輸入錯誤的賬號密碼，就不會返回token值了。

注意：mock只是模擬數(shù)據(jù),不會在network中顯示,只有真實的請求才會在network中顯示。

登錄成功，跳轉(zhuǎn)到首頁即可。

router.push("/home");

二、面試題

1.前端登錄流程

①　在登錄頁點擊”登錄“，前端會帶著用戶名和密碼去調(diào)用后端的登錄接口請求登錄；
②　后端收到請求后，會驗證用戶名和密碼，如果驗證失敗，會返回相關(guān)的錯誤信息，前端提示相應(yīng)錯誤信息；如果驗證成功，就會生成當(dāng)前用戶所對應(yīng)的一個token值，并返回前端token；
③　前端拿到token之后，將token存儲起來（可以存儲在localStorage、sessionStorage、cookie、vuex中），并跳轉(zhuǎn)頁面即登錄成功；
④　前端每一次向后端請求資源的時候都要攜帶后端簽發(fā)的token。如果前端在發(fā)起下一次請求時攜帶了token，那么服務(wù)器就會根據(jù)提交的token值去驗證你是哪個用戶，從而根據(jù)你的操作去返回不同的結(jié)果；
⑤　最后，在向后端發(fā)送其他請求時，我們一般需要在請求頭中帶上這個token值，在項目中我們通常把它封裝在一個請求攔截器中，后端判斷請求頭中有無該token，有則驗證該token，驗證成功就會正常地返回數(shù)據(jù)，驗證失敗，比如過期，就會返回相應(yīng)的錯誤碼，前端拿到相關(guān)錯誤信息清除token，并且再回退到登錄頁。

2.token是什么？

token的意思是令牌，是用戶第一次登錄時，服務(wù)器生成的一段加密字符串，然后返回給客戶端。
客戶端每次向服務(wù)器請求資源的時候，只需要帶上token去請求數(shù)據(jù)就行，不用再帶著用戶名和密碼去請求，服務(wù)器直接解密token，就可以知道用戶的相關(guān)信息。由于基本所有請求都需要攜帶toke，我們可以在請求攔截器中統(tǒng)一封裝，讓每個請求都能帶上token。

到此這篇關(guān)于Vue3+axios+Mock.js實現(xiàn)登錄功能的示例代碼的文章就介紹到這了,更多相關(guān)Vue3 axios Mock.js登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論