使用font-awesome

npm install --save font-awesome

修改 src/main.js 增加

import 'font-awesome/scss/font-awesome.scss'

1 login页面增加图标

<template>
  <div class="login-container">
    <el-form :model="myForm" :rules="myRule"
      status-icon
      ref="myForm" 
      label-position="left" 
      label-width="0px" 
      class="demo-ruleForm login-page">
        <h3 class="title">登录</h3>
        <el-form-item prop="username">
          <el-input type="text" 
              v-model="myForm.username" 
              auto-complete="off" 
              placeholder="用户名"
            >
            <template slot="prepend">
              <span class="fa fa-user fa-lg" style="width: 13px"></span>
            </template>
          </el-input>
        </el-form-item>
          <el-form-item prop="password">
            <el-input :type="pwdType"
                      v-model="myForm.password"
                      auto-complete="off"
                      placeholder="密码"
              >
              <template slot="prepend">
                <span class="fa fa-lock fa-lg"
                      style="width: 13px"></span>
              </template>
              <template slot="suffix">
                <span class="password-eye"
                      @click="showPassword"
                      :class="eyeType"
                      style="width: 13px"></span>
              </template>
            </el-input>
          </el-form-item>
        <el-checkbox v-model="rememberme" class="rememberme">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

修改样式

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .password-eye {
    position: absolute;
    right: 20px;
    top: 11px;
    cursor: pointer;
  }
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>

效果如下

image

给"眼睛"增加click事件

<script>
export default {
  data(){
    return {
      logining: false,
      myForm: {
        username: '',
        password: '',
      },
      myRule: {
        username: [{ required: true, message: 'please enter your account', trigger: 'blur' }],
        password: [{ required: true, message: 'enter your password', trigger: 'blur' }]
      },
      rememberme: false,
      pwdType: 'password',
      eyeType: 'fa fa-eye-slash fa-lg',
    }
  },
  methods: {
    showPassword() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
        this.eyeType = 'fa fa-eye fa-lg'
      } else {
        this.pwdType = 'password'
        this.eyeType = 'fa fa-eye-slash fa-lg'
      }
    },
    handleSubmit () {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.logining = true;
          if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
              this.logining = false;
              sessionStorage.setItem('user', this.myForm.username);
              this.$router.push({path: '/'});
          }else{
            this.logining = false;
            this.$alert('账号或密码错误', '温馨提示', {
                confirmButtonText: '确定'
            })
          }
        }else{
          console.log('error submit!');
          return false;
        }
      })
    }
  }
};
</script>

2 简单实现记住密码

成功登陆后把用户名和密码存入cookie，再次进入页面时读取cookie

<script>
export default {
  data(){
    return {
      logining: false,
      myForm: {
        username: '',
        password: '',
      },
      myRule: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      rememberme: false,
      pwdType: 'password',
      eyeType: 'fa fa-eye-slash fa-lg',
      redirect: undefined,
    }
  },
  methods: {
    showPassword() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
        this.eyeType = 'fa fa-eye fa-lg'
      } else {
        this.pwdType = 'password'
        this.eyeType = 'fa fa-eye-slash fa-lg'
      }
    },
    handleSubmit () {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.logining = true;
          if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
              this.logining = false;
              //sessionStorage.setItem('user', this.myForm.username);
              if(this.rememberme){
                //console.log(this.myForm.password)
                this.setCookie(this.myForm.username, this.myForm.password, 7)
              }else{
                this.clearCookie()
              }
              this.$router.push({path: '/'});
          }else{
            this.logining = false;
            this.$alert('账号或密码错误', '温馨提示', {
                confirmButtonText: '确定'
            })
          }
        }else{
          console.log('error submit!');
          return false;
        }
      })
    },
    setCookie(name, pass, days){
      let expire = new Date()
      expire.setDate(expire.getDate() + days)
      document.cookie = `C-username=${name};expires=${expire}`
      document.cookie = `C-password=${pass};expires=${expire}`
    },
    clearCookie(){
      this.setCookie('', '', -1)
    },
    getCookie(){
      if(document.cookie.length){
        let arr = document.cookie.split('; ')
        for(let i=0; i<arr.length; i++){
          let arr2 = arr[i].split('=')
          if(arr2[0] === 'C-username'){
            this.myForm.username = arr2[1]
          }else if(arr2[0] === 'C-password'){
            this.myForm.password = arr2[1]
            this.rememberme = true
          }
        }
      }
    },
  },
  mounted(){
    this.getCookie()
  }
};
</script>

注意修改之前写在main.js里面的路由导航守卫，先将其隐藏，后期再处理

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/css/index.scss'
import 'font-awesome/scss/font-awesome.scss'

Vue.use(ElementUI)
Vue.config.productionTip = false

// router.beforeEach((to, from, next) => {
//   if (to.path === '/login') {
//     sessionStorage.removeItem('user')
//   }
//   var user = sessionStorage.getItem('user')
//   if (!user && to.path !== '/login') {
//     next({
//       path: '/login'
//     })
//   } else {
//     next()
//   }
// })

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

文章改编自大神博客：https://www.cnblogs.com/wbjxxzx/p/9975933.html，仅作为学习实践。