博客

前言

最近做练习的时候遇到了记住登录用户信息的需求，我查了一些资料、看过几个人的博客，但是我看到的文章不是有错误就是格式及其糟糕，为此我会将我实现的原理用尽可能通俗易懂的方式告诉大家。

使用的依赖

• ant-design-vue
• js-base64

实现原理

如图所示，我们需要根据用户是否点击记住信息来决定是否保存用户信息；

当用户决定要保存登录信息的时候，我们将使用

cookie

来保存信息，当然在保存密码前我们需要用

js-base64

对其进行加密；

要注意的是在获取密码前要先对

cookie

中加密的密码进行解密再保存在组件的数据中，最后通过数据渲染视图；

代码

注意：

关于

template

部分的代码可选择跳过，源码请查询官方文档( 表单/登录框 )


https://www.antdv.com/components/form-cn/#components-form-demo-login-form


重点

是看

script

中定义的

方法

和

组件生命周期函数


建议观看顺序：

setCookie

–》

getCookie

–》

initForm

–》

handleSubmit

–》

created


<template>
    <a-form
            id="components-form-demo-normal-login"
            :form="form"
            class="login-form"
            @submit="handleSubmit">
        <a-form-item>
            <a-input
                    v-decorator="['userName',{
                      rules: [
                          {
                              required: true,
                              message: '请输入用户名!'
                          },
                          {
                              min: 5,
                              message: '用户名最小长度为5位'
                          },
                          {
                              max: 12,
                              message:'用户名长度不可超过12位'
                          }],
                        initialValue: username
                    }]"
                    placeholder="username">
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-input
                    v-decorator="['password',{
                        rules: [
                            {
                                required: true,
                                message: '请输入密码!'
                            },
                            {
                                min: 8,
                                message: '密码最低长度为8位'
                            },
                            {
                                max: 16,
                                message: '密码长度不可超过16位'