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

系统管理员 2022-09-03 04:29 296阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]

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 工具类][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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: /images/20220829/b73f933d82c842fdaac75b90718d52f2.png
[jsencrypt]: https://blog.csdn.net/wz_coming/article/details/119419867