Vue project login page implements remembering user name and password

Vue project login page implements remembering user name and password

Record the implementation logic. This logic should be understood in two steps.

• When logging in for the first time, the page does not have the user’s login information. The implementation logic is as follows:

  1. The user enters the user name and password to log in. The user information is a responsive object named form. The v-model corresponds to two input boxes respectively.
  2. The user clicks to log in to implement the login function
  3. Determine whether Remember Password is checked, v-model a CheckBox, checked is true, unchecked is false, the default is false
     • If Remember Password is checked, write an object named loginInfo in the browser's localstorage, and the value is the form after the string.
     • If it is not checked, an object named loginInfo is also written in localstorage, and the value is empty.

  

• Next time you log in, it will be judged whether to fill in the form input box based on the last check status. The logic is as follows

  When mounting the page, determine whether there are required objects in localstorage

  • If there is, set the value ofrememberMe to true, and fill in the username and rice noodles into the input box on the page
  • If not, set the value ofrememberMe to false

  Because the logic is relatively simple, I won’t draw any more pictures.

Put the relevant code

<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>联系我们</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')
}

// 页面加载时监听是否有记住密码
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中的内容