Vue登录功能

html

<el-form
  class="login-form"
  :rules="loginRules"
  ref="form"
  :model="form"
  label-width="0"
  >
  <el-form-item prop="username">
    <el-input
      size="small"
      v-model="form.username"
      auto-complete="false"
      placeholder="请输入用户名"
      @focus="focus(0)"
      @blur="blur(0)"
    >
      <i
        slot="prefix"
        class="iconfont icon-yonghu1"
        :style="isFocus[0] ? 'color:#1c8ffa' : ''"
      ></i>
    </el-input>
    <!-- input输入框获取焦点的时候（isFocus[0]为true），蓝线才出来，表示正确，而且存在一个过渡效果 -->
    <div
      class="bottom-line"
      :style="isFocus[0] ? 'left:0%; width:100%;' : ''"
    ></div>
    <!-- 没有填写内容，并且失去焦点的时候，再显示红线，表示错误 -->
    <div
      class="bottom-error-line"
      :style="(errorArr[0] && !isFocus[0]) ? 'left:0%; width:100%;' : ''"
    ></div>
    <!-- 对钩 √-->
    <span class="iconfont icon-wancheng1" v-show="correctArr[0]"></span>
    <!-- 叉号x -->
    <span class="iconfont icon-close" v-show="incorrectArr[0]"></span>
  </el-form-item>
  <el-form-item prop="password">
    <el-input
      size="small"
      type="password"
      v-model="form.password"
      auto-complete="false"
      placeholder="请输入密码"
      @keyup.enter.native="submitForm"
      @focus="focus(1)"
      @blur="blur(1)"
    >
      <i
        slot="prefix"
        class="iconfont icon-mima1"
        :style="isFocus[1] ? 'color:#1c8ffa' : ''"
      ></i>
    </el-input>
    <div
      class="bottom-line"
      :style="isFocus[1] ? 'left:0%; width:100%;' : ''"
    ></div>
    <div
      class="bottom-error-line"
      :style="(errorArr[1] && !isFocus[1]) ? 'left:0%; width:100%;' : ''"
    ></div>
    <span class="iconfont icon-wancheng1" v-show="correctArr[1]"></span>
    <span class="iconfont icon-close" v-show="incorrectArr[1]"></span>
  </el-form-item>
  
  <div class="more">
    <el-checkbox v-model="checked">记住密码</el-checkbox>
  </div>
  
  <div
    class="login-button"
    v-waves="{color:'#ffffff',time:wavesTime}"
    @click="submitForm">登 录</div>
</el-form>

css

.bottom-line {
        content: "";
        width: 0px;
        height: 1px;
        background: #1c8ffa;
        position: absolute;
        bottom: -1px;
        left: 30%;
        transition: all 0.4s;
      }
      .bottom-error-line {
        content: "";
        width: 0px;
        height: 1px;
        background: #f25555;
        position: absolute;
        bottom: -1px;
        left: 50%;
        transition: all 0.4s;
      }

data

export default {
  name: 'user-login',
  data() {
    // 自定义校验规则：用户名
    const validateUser = (rule, value, callback) => {
      // if (!isvalidUsername(value)) {
      // 检验没有通过
      if (!value) {
        // 设置不显示对钩
        this.$set(this.correctArr, 0, false);
        // 设置显示叉号
        this.$set(this.incorrectArr, 0, true);
        // 设置显示红色的下横线
        this.$set(this.errorArr, 0, true);
        callback(new Error('请输入用户名'));
        // callback();
      } else {
        // 设置显示对钩
        this.$set(this.correctArr, 0, true);
        // 设置不显示叉号
        this.$set(this.incorrectArr, 0, false);
        // 设置不显示红色的下横线
        this.$set(this.errorArr, 0, false);
        callback();
      }
    };
    // 自定义校验规则：密码
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        this.$set(this.correctArr, 1, false);
        this.$set(this.incorrectArr, 1, true);
        this.$set(this.errorArr, 1, true);
        callback(new Error('请输入密码'));
      } else {
        this.$set(this.correctArr, 1, true);
        this.$set(this.incorrectArr, 1, false);
        this.$set(this.errorArr, 1, false);
        callback();
      }
    };
    return {
      form: {
        username: '1',
        password: '1',
      },
      // 记住密码
      checked: false,
      // 每个选框是否获取焦点
      isFocus: [false, false],
      // 每个选框是否正确 对号
      correctArr: [false, false],
      // 每个选框是否正确 叉号
      incorrectArr: [false],
      // 每个选框是否错误，红色的下横线
      errorArr: [false, false],
      // 验证规则
      loginRules: {
        username: [
          // validator 自定义校验规则
          { required: true, trigger: 'blur', validator: validateUser },
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword },
        ],
      },
      // setTimout对象
      timer: null,
    };
  },

  mounted() {
    // 记住密码处理
    // 每次打开页面的时候，都从cookie里面获取账号,密码,checked
    this.form.username = dealCookie.get('E_username');
    this.form.password = dealCookie.get('E_password');
    this.checked = Boolean(dealCookie.get('E_checked'));
  },
  
  methods: {
    // 聚焦改变样式
    focus(index) {
      this.$set(this.isFocus, index, true);
    },
    // 失焦改变样式
    blur(index) {
      this.$set(this.isFocus, index, false);
    },
        // 提交
    submitForm() {
      // 清除定时器
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const params = {
              captcha: 'string',
              domain: getSecHost(), // 获取二级域名  localhost
              mac: 'string',
              password: this.form.password,
              username: this.form.username,
            };
            login(params).then((res) => {
              if (res.code === '00000') {
                //  //判断复选框是否被勾选,就保存用户名，密码，时限7天
                if (this.checked) {
                  // 设置cookie,保存7天
                  dealCookie.set('E_username', this.form.username, 7);
                  dealCookie.set('E_password', this.form.password, 7);
                  dealCookie.set('E_checked', true, 7);
                } else { // 否则，删除cookie中保存的用户名，密码
                  dealCookie.delete('E_username');
                  dealCookie.delete('E_password');
                  dealCookie.delete('E_checked');
                }
                // 用户信息
                const userInfo = res.data.userInfo || {};
                //用户token
                const token = res.data.token || '';
                // 保存token到vuex和localstorage中
                this.$store.commit('SET_TOKEN', token);
                // 保存用户信息
                this.$store.commit('SET_USERIFNO', userInfo);
                this.$message.success('登录成功');
                this.$router.push('/home');
              } else {
                this.$message.error(res.msg);
                return false;
              }
            });
          }
        });
      }, this.wavesTime * 1000);
    },

util/util.js

// 设置cookies,获取cookie,删除cookie
export const dealCookie = {
  // 设置cookies
  set: (name, value, days) => {
    const d = new Date();
    d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
    window.document.cookie = `${name}=${value};path=/;expires=${d.toGMTString()}`;
  },
  // 获取cookie
  get: (name) => {
    const v = window.document.cookie.match(`(^|;) ?${name}=([^;]*)(;|$)`);
    return v ? v[2] : null;
  },
  // 删除cookie
  delete: (name) => {
    const d = new Date();
    d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * -1);
    window.document.cookie = `${name}='';path=/;expires=${d.toGMTString()}`;
  },
};

vuex

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import user from './modules/user';
import common from './modules/common';
import map from './modules/map';
import tags from './modules/tags';
import snow from './modules/snow';
import getters from './getters';

Vue.use(Vuex);
const store = new Vuex.Store({
  modules: {
    user,
    map,
    common,
    tags,
    snow,
  },
  getters,
  // 数据持久化
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
      return {
        // 只储存common模块中的数据
        common: val.common,
        user: val.user,
      };
    },
  })],
});

export default store;

modules/user.js

import { setStore, getStore } from '@/util/store';

const user = {
  state: {
    // token,直接获取本地存储的token
    token: getStore({ name: 'token' }) || '',
    // 用户信息
    userInfo: getStore({ name: 'userInfo' }) || {},
  },
  actions: {
  // 退出登录
    LOG_OUT: ({ commit }) => {
      commit('SET_TOKEN', '');
    },
  },
  mutations: {
    // 存token
    SET_TOKEN: (state, token) => {
      state.token = token;
      setStore({ name: 'token', content: state.token });
    },
    // 存用户信息
    SET_USERIFNO: (state, userInfo) => {
      setStore({ name: 'userInfo', content: userInfo });
      state.userInfo = userInfo;
    },

};
export default user;

util/store.js

import {
  validatenull,
} from '@/util/validate';
/**
 * 存储localStorage
 */
export const setStore = (params) => {
  const {
    name, // 名称
    content, // 内容
    type, // 类型
  } = params;
  const obj = {
    dataType: typeof (content),
    content,
    type,
    datetime: new Date().getTime(),
  };
  if (type) window.sessionStorage.setItem(name, JSON.stringify(obj));
  else window.localStorage.setItem(name, JSON.stringify(obj));
};
/**
     * 获取localStorage
     */

export const getStore = (params) => {
  const {
    name,
  } = params;
  let obj = {};
  let content = '';
  obj = window.sessionStorage.getItem(name);
  if (validatenull(obj)) obj = window.localStorage.getItem(name);
  if (validatenull(obj)) {
    return undefined;
  }
  obj = JSON.parse(obj);
  if (obj.dataType === 'string') {
    content = obj.content;
  } else if (obj.dataType === 'number') {
    content = Number(obj.content);
  } else if (obj.dataType === 'boolean') {
    content = !!(obj.content);
  } else if (obj.dataType === 'object') {
    content = obj.content;
  }
  // eslint-disable-line
  return content;
};
/**
     * 删除localStorage
     */
export const removeStore = (params) => {
  const {
    name,
  } = params;
  window.localStorage.removeItem(name);
  window.sessionStorage.removeItem(name);
};

/**
 * 获取全部localStorage
 */
export const getAllStore = (params) => {
  const list = [];
  const {
    type,
  } = params;
  for (let i = 1; i <= window.sessionStorage.length; i++) {
    if (type) {
      list.push({
        name: window.sessionStorage.key(i),
        content: getStore({
          name: window.sessionStorage.key(i),
          type: 'session',
        }),
      });
    } else {
      list.push(getStore({
        name: window.localStorage.key(i),
        content: getStore({
          name: window.localStorage.key(i),
        }),
      }));
    }
  }

  return list;
};

/**
 * 清空全部localStorage
 */
export const clearStore = (params) => {
  const {
    type,
  } = params;
  if (type) {
    window.sessionStorage.clear();
    return;
  }
  window.localStorage.clear();
};

util/validate.js

/**
 * 判断是否为空
 */
export function validatenull(val) {
  if (typeof val === 'boolean') {
    return false;
  }
  if (typeof val === 'number') {
    return false;
  }
  if (val instanceof Array) {
    if (val.length === 0) return true;
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true;
  } else {
    if (val === 'null' || val === null || val === 'undefined' || val === undefined || val === '') return true;
    return false;
  }
  return false;
}