vue实现登录，记住密码功能（cookie）

 

 1. auth工具类

import Cookies from 'js-cookie'

export function getCookie(key: string) {
  return Cookies.get(key)
}

export function setCookie(key: string, value: string, expires: number) {
  return Cookies.set(key, value, { expires: expires })
}

export function removeCookie(key: string) {
  return Cookies.remove(key)
}

2. jsencrypt 工具类

3. types.d.ts

export interface ILoginDTO {
  username: string;
  password: string;
  code: string;
}

4. index.vue

<template>
  <div class="bg-white login">
    <div class="w1000 margin-auto pt-100">
      <div class="flex flex-space-between pt-50">
        <div class="pt-70">
          <img src="../../assets/images/login/login_img.png" />
        </div>
        <div class="w420-h465">
          <p class="pt-50 fs-24 fc-3F4042 text-align">用户账号登录</p>
          <el-form ref="formRef" :rules="formRules" :model="formModel" class="login-form pt40-r50-b0-l50">
            <el-form-item label="" prop="username">
              <el-input v-model.trim="formModel.username" size="large" placeholder="请输入用户名" maxlength="20">
                <svg-icon slot="prefix" width="17" height="19" name="loginNameIcon"></svg-icon>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input type="password" v-model.trim="formModel.password" size="large" placeholder="请输入密码" maxlength="20" :show-password="true">
                <svg-icon slot="prefix" width="17" height="20" name="loginPwdIcon"></svg-icon>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="code" class="login-code">
              <el-input v-model.trim="formModel.code" size="large" placeholder="请输入验证码" maxlength="4">
                <svg-icon slot="prefix" width="17" height="20" name="loginCodeIcon"></svg-icon>
              </el-input>
            </el-form-item>
            <el-checkbox v-model="rememberMe" class="pb-20">记住密码</el-checkbox>
          </el-form>
          <div class="login-submit pl-50 pr-50">
            <el-button @click="submit" type="success">立即登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import { getCookie, setCookie, removeCookie } from "@/utils/auth";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { ILoginDTO } from "@/api/auth/types";
@Component({
  name: 'login'
})
export default class extends Vue {
  private formModel: ILoginDTO = {
    username: '',
    password: '',
    code: '',
  }
  private formRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ], 
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    code: [
      { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
  }
  private rememberMe: boolean = false;
  created() {
    this.getCookieAccountInfo()
  }
  // 获取存储在cookie 中的 账号密码信息
  private getCookieAccountInfo() {
    const username = getCookie("username");
    const password = getCookie("password");
    const rememberMe = getCookie('rememberMe')
    this.formModel = {
      username: username === undefined ? this.formModel.username : username,
      password: password === undefined ? this.formModel.password : decrypt(password),
      code: ''
    };
    this.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
  }
  private submit() {
    (this.$refs.formRef as any).validate(async(valid: boolean) => {
      if (valid) {
        this.isRememberMe()
      } else {
        return false;
      }
    })
  }
  private isRememberMe() {
    if (this.rememberMe) {
      setCookie("username", this.formModel.username, 30);
      setCookie("password", encrypt(this.formModel.password), 30);
      setCookie('rememberMe', this.rememberMe, 30);
    } else {
      removeCookie("username");
      removeCookie("password");
      removeCookie('rememberMe');
    }
  }
}
</script>
<style lang='less'>
.login {
  .login-form {
    .login-code {
      .el-input {
        width: 60% !important;
      }
    }
    .el-form-item__content {
      height: 45px;
      line-height: 45px;
      .el-input--prefix .el-input__inner {
        padding-left: 43px !important;
      }
      .el-input__inner {
        height: 45px;
        line-height: 45px;
      }
      .el-input__prefix {
        display: flex;
        align-items: center;
        left: 15px !important;
      }
    }
  }
  .login-submit {
    .el-button {
      width: 100%;
      height: 50px;
      font-size: 24px;
    }
    .el-button--success {
      background-color: #00B4A5;
      border-color: #00B4A5;
    }
  }
}
</style>