Vue elementUI實(shí)現(xiàn)免密登陸與號(hào)碼綁定功能

更新時(shí)間：2022年11月07日 10:24:28 作者：林曉lx

這篇文章主要介紹了Vue elementUI實(shí)現(xiàn)免密登陸與號(hào)碼綁定功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

前言

前端代碼的框架采用vue.js + elementUI 這套較為簡(jiǎn)單的方式實(shí)現(xiàn)，以及typescript語(yǔ)法更方便閱讀。

首先來(lái)編寫(xiě)發(fā)送驗(yàn)證碼函數(shù)，登錄，綁定，解綁的業(yè)務(wù)都需要發(fā)送驗(yàn)證碼功能，通過(guò)currentVerifyingType 來(lái)區(qū)別當(dāng)前驗(yàn)證碼種類(lèi)。也就是在服務(wù)端的Purpose目的。

VerifyingType 可以為LOGIN，UNBIND_PHONENUMBER或BIND_PHONENUMBER

async sendVerificationCode(phoneNumber, type) {
    this.currentVerifyingType = type;
    this.smsSendCd = 60;
    this.timer = setInterval(() => {
    this.smsSendCd--;
    if (this.smsSendCd <= 0) {
        clearInterval(this.timer);
    }
    }, 1000);
    await request(`${this.host}${this.prefix}/Captcha/Send`, "post", {
    userId: this.userInfo == null ? null : this.userInfo.id,
    phoneNumber: phoneNumber,
    type: type,
    })
    .catch((re) => {
        var res = re.response.data;
        this.errorMessage(res.error.message);
    })
    .then((re) => {
        var res = re.data.result;
        this.successMessage("發(fā)送驗(yàn)證碼成功");
    });
}

注意幾個(gè)關(guān)鍵的全局變量

userInfo: null,                   //用戶對(duì)象
currentVerifyingType: null,       //當(dāng)前發(fā)送驗(yàn)證碼的用途
smsSendCd: 0,                     //發(fā)送驗(yàn)證碼的冷卻時(shí)間，默認(rèn)60s
loginForm: {                      //登錄對(duì)象
username: "",
password: "",
},
token: null,                      //登錄憑證Token
verifyNumber: null,               //填寫(xiě)的驗(yàn)證碼

登錄功能

創(chuàng)建手機(jī)號(hào)輸入控件

<el-input
    ref="username"
    v-model="loginForm.username"
    :placeholder="'請(qǐng)輸入手機(jī)號(hào)'"
    type="text"
    tabindex="1"
    autocomplete="on">
    <template slot="prepend">+86</template>
</el-input>

創(chuàng)建驗(yàn)證碼控件，并添加一個(gè)按鈕用于發(fā)送驗(yàn)證碼，點(diǎn)擊后觸發(fā)sendVerificationCode

<el-input
    ref="password"
    v-model="loginForm.password"
    :type="passwordType"
    :placeholder="'發(fā)送驗(yàn)證碼后鍵入驗(yàn)證碼'"
    tabindex="2"
    autocomplete="on"
    @blur="capsTooltip = false"
    @keyup.enter.native="handleLogin"
    >
    <el-button
        slot="append"
        :disabled="smsSendCd > 0"
        @click="sendVerificationCode(loginForm.username, 'LOGIN')"
        >{{
        smsSendCd == 0 ? "發(fā)送驗(yàn)證碼" : smsSendCd + "后重試"
        }}
    </el-button>
</el-input>

登錄函數(shù)，將驗(yàn)證電話號(hào)碼（即用戶名）和驗(yàn)證碼

async handleLogin() {
    this.loading = true;
    let phoneNumber = this.loginForm.username;
    let password = this.loginForm.password;
    phoneNumber = phoneNumber.trim();
    await request(`${this.host}api/TokenAuth/Authenticate`, "post", {
    phoneNumber,
    password,
    });
}

登錄完成后，將Token存入Cookie

.then(async (res) => {
    var data = res.data.result;
    setToken(data.accessToken);

綁定/解綁功能

創(chuàng)建新手機(jī)號(hào)輸入框，若沒(méi)有綁定手機(jī)，附帶綁定按鈕，按下后將發(fā)送驗(yàn)證碼；若已綁定手機(jī)，需要先解綁，才能綁定新號(hào)碼，附帶解綁按鈕，按下后將發(fā)送驗(yàn)證碼

<el-input v-model="userInfo.phoneNumber"> </el-input>
<el-button
    v-if="!userInfo.isPhoneNumberConfirmed"
    size="mini"
    type="primary"
    :disabled="smsSendCd > 0"
    @click="
    sendVerificationCode(userInfo.phoneNumber, 'BIND_PHONENUMBER')
    "
    >{{ smsSendCd == 0 ? "驗(yàn)證手機(jī)號(hào)" : smsSendCd + "后重試" }}
</el-button>
<el-button
    v-else
    size="mini"
    type="danger"
    :disabled="smsSendCd > 0"
    @click="
    sendVerificationCode(userInfo.phoneNumber, 'UNBIND_PHONENUMBER')
    "
    >{{ smsSendCd == 0 ? "解綁手機(jī)號(hào)" : smsSendCd + "后重試" }}
</el-button>

創(chuàng)建校驗(yàn)短信驗(yàn)證碼控件

<el-input v-model="verifyNumber">
    <el-button
        slot="append"
        type="primary"
        size="mini"
        @click="verify">
        完成驗(yàn)證
    </el-button>
</el-input>

創(chuàng)建校驗(yàn)短信驗(yàn)證碼函數(shù)，

async verify() {
    var action = null;
    if (this.currentVerifyingType == "BIND_PHONENUMBER") {
    action = "Bind";
    } else if (this.currentVerifyingType == "UNBIND_PHONENUMBER") {
    action = "Unbind";
    } else {
    action = "Verify";
    }
    await request(`${this.host}${this.prefix}/Captcha/${action}`, "post", {
    token: this.verifyNumber,
    })
    .catch((re) => {
        var res = re.response.data;
        this.errorMessage(res.error.message);
    })
    .then((re) => {
        var res = re.data;
        if (res.success) {
        this.successMessage("綁定成功");
        window.location.reload()   
        }
    });
}

獲取用戶信息功能

登錄成功后我們要拿到當(dāng)前用戶的信息，存入userInfo對(duì)象，并在頁(yè)面上簡(jiǎn)單展示

<span>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{ userInfo }}</span>

創(chuàng)建一個(gè)獲取當(dāng)前用戶的函數(shù)

async getCurrentUser() {
    await request(
    `${this.host}${this.prefix}/User/GetCurrentUser`,
    "get",
    null
    )
    .catch((re) => {
        var res = re.response.data;
        this.errorMessage(res.error.message);
    })
    .then(async (re) => {
        var result = re.data.result as any;
        this.userInfo = result;
        this.token = getToken();
        clearInterval(this.timer);
        this.smsSendCd = 0;
        this.currentVerifyingType = null;
        this.successMessage("登錄成功");
    });
}

此函數(shù)將在成功登錄之后調(diào)用，也用于已登錄狀態(tài)的情況下，打開(kāi)網(wǎng)頁(yè)時(shí)調(diào)用，在handleLogin函數(shù)中，在請(qǐng)求登錄api后編寫(xiě)續(xù)操作

.then(async (res) => {
    var data = res.data.result;
    setToken(data.accessToken);
    await this.getCurrentUser();
})

獲取用戶信息功能

登出, 將Token以及用戶信息置空

<el-button
    :loading="loading"
    type="danger"
    style="width: 100%"
    @click.native.prevent="logout">
    退出登錄
</el-button>

logout() {
    setToken(null);
    this.token = null;
    this.userInfo = null;
},

至此，已完成了所有的工作

最終效果

項(xiàng)目地址

Github:matoapp-samples

到此這篇關(guān)于Vue elementUI實(shí)現(xiàn)免密登陸與號(hào)碼綁定功能的文章就介紹到這了,更多相關(guān)Vue免密登陸與號(hào)碼綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: