vue項目登錄頁面實現(xiàn)記住用戶名和密碼

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

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

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

  

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

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

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

  因為邏輯比較簡單，就不再畫圖了

放一下相關(guān)的代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-612103.html

<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="輸入賬號">
                    <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">注冊賬號</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 個字符", trigger: "blur" }
    ],
    password: [
        { required: true, message: "密碼不能為空", trigger: "blur" },
        { min: 3, max: 30, message: "長度在 6 到 30 個字符", 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('用戶名或密碼錯誤')
            }
        }
        else { ElMessage.error('校驗沒通過') }
    })
}

const toRegister = () => {
    router.push('/register')
}

// 頁面加載時監(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àn)記住用戶名和密碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！