快捷導(dǎo)航

vue項(xiàng)目登錄頁面實(shí)現(xiàn)記住用戶名和密碼的示例代碼

更新時(shí)間：2023年07月31日 09:09:56 作者：梔椩

本文主要介紹了vue項(xiàng)目登錄頁面實(shí)現(xiàn)記住用戶名和密碼的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

記錄一下實(shí)現(xiàn)的邏輯，應(yīng)該分兩步來理解這個(gè)邏輯

首次登錄，頁面沒有用戶的登錄信息，實(shí)現(xiàn)邏輯如下：

用戶輸入用戶名和密碼登錄，用戶信息為名為form的響應(yīng)式對(duì)象，v-model分別對(duì)應(yīng)兩個(gè)輸入框
用戶點(diǎn)擊登錄實(shí)現(xiàn)登錄功能
判斷是否勾選了記住密碼，v-model一個(gè)CheckBox，勾選為true，不勾選為false，默認(rèn)false
- 若勾選記住密碼，則在瀏覽器的localstorage中寫入一個(gè)名為loginInfo的對(duì)象，值為字符串后的form
- 若沒有勾選，同樣在localstorage中寫入一個(gè)名為loginInfo的對(duì)象，值為空

下次再登錄，就會(huì)根據(jù)上一次的勾選狀態(tài)來判斷是否填充form輸入框，邏輯如下

掛載頁面時(shí)，判斷l(xiāng)ocalstorage中是否有需要的對(duì)象

如果有，就把rememberMe的值設(shè)為true，并向頁面的輸入框填充用戶名和米面
如果沒有，就把rememberMe的值設(shè)為false

因?yàn)檫壿嫳容^簡單，就不再畫圖了

放一下相關(guān)的代碼

<template>
    <div class="login">
        <el-form ref="formRef" :model="form" :rules="rules" class="login-form">
            <h3 class="title">登錄</h3>
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="輸入賬號(hào)">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="輸入密碼" type="password" show-password
                    @keyup.enter.native="doLogin">
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <div class="tooltip">
                <el-checkbox v-model="rememberMe" label="記住我" size="large" />
                <div class="register" @click="toRegister">注冊(cè)賬號(hào)</div>
                <!-- <a href="#">忘記密碼</a> -->
            </div>
            <el-form-item>
                <el-button style="width: 100%" @click="doLogin" class="input">登錄</el-button>
            </el-form-item>
            <div class="sep">
                <div style="margin-top: -11px">
                    <label>聯(lián)系我們</label>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
const userStore = useUserStore()
const router = useRouter()
import http from '@/utils/http'
// import axios from 'axios'
const rememberMe = ref(false)
const formRef = ref(null)
const form = ref({
    username: '',
    password: ''
})
const rules = {
    username: [
        { required: true, message: "用戶名不能為空", trigger: "blur" },
        { min: 2, max: 30, message: "長度在 2 到 30 個(gè)字符", trigger: "blur" }
    ],
    password: [
        { required: true, message: "密碼不能為空", trigger: "blur" },
        { min: 3, max: 30, message: "長度在 6 到 30 個(gè)字符", trigger: "blur" }
    ],
}
const doLogin = () => {
    const { username, password } = form.value
    const data = { username, password }
    // console.log(data)
    formRef.value.validate(async valid => {
        if (valid) {
            try {
                await userStore.getUserInfo(data)
                // console.log('sdfdssff', userStore.userInfo)
                if (userStore.userInfo.Authorization) {
                    if(rememberMe.value){
                        localStorage.setItem('loginInfo', JSON.stringify(form.value))
                    } else {
                        localStorage.setItem('loginInfo', JSON.stringify({}))
                    }
                    router.push('/')
                }
            } catch (error) {
                ElMessage.error('用戶名或密碼錯(cuò)誤')
            }
        }
        else { ElMessage.error('校驗(yàn)沒通過') }
    })
}
const toRegister = () => {
    router.push('/register')
}
// 頁面加載時(shí)監(jiān)聽是否有記住密碼
onMounted(() => {
    // console.log(Object.keys(localStorage.getItem('loginInfoTs')))
    if(localStorage.getItem('loginInfo') != null && Object.keys(localStorage.getItem('loginInfo')).length > 2){
        rememberMe.value = true
        const loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
        form.value.username = loginInfo.username
        form.value.password = loginInfo.password
    } else {
        rememberMe.value = false
    }
})
</script>

核心代碼是doLogin方法和onMounted中的內(nèi)容

到此這篇關(guān)于vue項(xiàng)目登錄頁面實(shí)現(xiàn)記住用戶名和密碼的示例代碼的文章就介紹到這了,更多相關(guān)vue登錄頁記住用戶名和密碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: