前言

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

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

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

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

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

效果如下：

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

看下效果：

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

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

點(diǎn)擊登錄就觸發(fā)校驗(yàn)：

點(diǎn)擊登錄按鈕驗(yàn)證一下：

4.Mock.js模擬登錄請(qǐng)求

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

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

5.Vue3引入使用axios

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

npm install axios --save

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

Vue3的寫法如下：

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

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

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

輸入錯(cuò)誤的賬號(hào)密碼，就不會(huì)返回token值了。

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

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

router.push("/home");

二、面試題

1.前端登錄流程

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

2.token是什么？

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

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

最新評(píng)論