Vue 登录模块之记住密码步骤分解

登录模块结构代码

<template>
  <div class="user-login">
    <!-- 登录页 -->
    <div class="user-login-form">
      <h2>
        <span>登录</span>
      </h2>
      <el-form :model="form" :rules="rules" ref="form" class="user-login-content">
        <el-form-item prop="userId">
          <el-input type="number" :maxlength="11" placeholder="请输入手机号码" v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="form.password" @keyup.enter.native="doLogin"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" @change="rememberPassword">记住密码</el-checkbox>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit('form')" class="user-login-button" :loading="loading">登 录</el-button>
        </el-form-item>
        <div class="forget-password">
          <router-link to="/user/forgetPassword">忘记密码</router-link>
          <router-link to="/user/register">立即注册&gt;</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

common.js 定义全局公共方法

/**
 * 设置cookie
 * @description < 登录时，写入cookie >
 */

export function setCookie (name, value, expiremMinutes) {
  let exDate = new Date();
  exDate.setTime(exDate.getTime() + expiremMinutes * 60 * 1000);
  document.cookie = name + '=' + escape(value) + ((expiremMinutes == null) ? '' : ';expires=' + exDate.toGMTString());
}

/**
 * 读取cookie
 * @description < 点击保存密码时，读取cookie >
 */
export function getCookie (name) {
  if (document.cookie.length > 0) {
    let start = document.cookie.indexOf(name + '=');
    if (start !== -1) {
      start = start + name.length + 1;
      let end = document.cookie.indexOf(';', start);
      if (end === -1) {
        end = document.cookie.length;
        return unescape(document.cookie.substring(start, end));
      }
    }
  }
  return '';
}

/**
 * 删除cookie
 * @description < 未点击保存密码时，删除cookie >
 */
export function delCookie (name) {
  let exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString();
  }
}

登录JS逻辑代码

<script>
  import {mapActions} from 'vuex';
  import {ACC_INFO} from '../../store/mutation-types';
  import CONFIG from '../../js/configs';
  import SERVER from '../../js/servers';
  import {communicate} from '../../js/communication';
  import {setCookie, delCookie, getCookie} from '../../js/common';
  // import routes from '@/router/shop';
  export default {
    data () {
      return {
        form: {
          userId: '',
          password: ''
        },
        loading: false,
        checked: false,
        rules: {
          userId: [
            {required: true, pattern: CONFIG.MOBILE_REGEXP, message: '请输入正确的手机号码', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入登录密码', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      ...mapActions([ACC_INFO]),
      handleSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let form = this.form;
            let params = {
              username: form.userId,
              password: form.password
            };
            // 记住密码
            let rememberStatus = this.checked;
            let userInfo = params.username + '&' + params.password;
            communicate.call(this, {
              url: SERVER.LOGIN.LOG,
              params,
              method: 'post',
              sucFn: (res) => {
                let accountInfo = {
                  name: res.data.name,
                  userId: res.data.userId,
                  userName: form.userId
                };
                this[ACC_INFO]({...accountInfo});
                // 勾选记住密码，保存到Cookie中
                if (rememberStatus) {
                  setCookie('userInfo', userInfo, 1440 * 3);
                } else {
                  delCookie('userInfo');
                }
                this.$router.push('/user/guidance');
              },
              errFn: (data) => {
                this.$message({
                  message: (data && data.message) || '获取数据失败!',
                  type: 'error'
                });
                this.loading = false;
              }
            });
          }
        });
      },
      // 回车登录事件
      doLogin () {
        this.handleSubmit('form');
      },
      // 记住密码
      rememberPassword () {
        console.log(this.checked);
      },
      loadUserInfo () {
        let userInfo = getCookie('userInfo');
        if (!!userInfo === true) {
          let userName = '';
          let passWord = '';
          let index = userInfo.indexOf('&');
          userName = userInfo.substring(0, index);
          passWord = userInfo.substring(index + 1);
          this.form.userId = userName;
          this.form.password = passWord;
          this.checked = true;
        }
      }
    },
    mounted () {
      this.loadUserInfo();
    }
  };
</script>