vue 保存登录信息

场景

在登录界面中使用账号和密码登录，需要记录用户登录信息，在下次进入登录界面时将上次登录信息反写到界面中。

浏览器：Google Chrome 内核版本: Chromium 75.0.3770.100 + IE (Trident 7~11)

登录界面截图

2021-09-24_090447.png

登录界面代码

<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="loginRules" status-icon ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-page">
      <h2 class="title">系统登录</h2>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

根据业务在登录界面需要记住的有3个属性，账号、密码和记住密码标识。其中账号和密码就存储原始值，记住密码标识存储"1"和"2"，"1"=记住，"2"=不记住。因此定义3个存储的key，在存储时使用。

const COOKIE_K_REMEMBER = "login_remember";
const COOKIE_K_USERNAME = "login_username";
const COOKIE_K_PASSWORD = "login_password";

使用cookie

刚开始笔者使用的是cookie存储。在登录成功后跳转界面之前调用存储函数setCookie()。其中this.checked属性与界面中记住密码的checkbox绑定。

if (this.checked) {
  this.setCookie(this.loginForm.username, this.loginForm.password, "1");
} else {
  this.setCookie("", "", "2");
}

设置cookie函数代码

setCookie(username, password, remember) {
  document.cookie = COOKIE_K_REMEMBER + "=" + remember;
  document.cookie = COOKIE_K_USERNAME + "=" + username;
  document.cookie = COOKIE_K_PASSWORD + "=" + password;
}

在界面渲染后调用获取函数getCookie()，将获取到存储的值反写到界面中。使用存储的key，拿到对应的值。

mounted() {
  this.getCookie();
}

获取cookie函数代码

getCookie() {
  let cs = document.cookie.split(";");
  for (let c of cs) {
    let kv = c.split("=");
    if (kv[0].trim() === COOKIE_K_USERNAME) {
      this.loginForm.username = kv[1].trim();
    } else if (kv[0].trim() === COOKIE_K_PASSWORD) {
      this.loginForm.password = kv[1].trim();
    } else if (kv[0].trim() === COOKIE_K_REMEMBER) {
      if (kv[1] === "1") {
        this.checked = true;
      } else {
        this.checked = false;
      }
    }
  }
}

使用cookie存储登录信息，进入登录界面输入账号和密码登录不选择记住密码，登录成功跳转到业务界面再退出登录返回登录界面，界面中没有上次登录的信息。在登录界面输入账号和密码登录选择记住密码登录成功跳转到业务界面再退出登录返回登录界面，界面中有有上次登录的信息。并且通过日志打印可以看出cookie存储的登录信息。但是关闭浏览器再次进入登录界面时，界面并没有之前存储的登录信息。笔者特意检查了一下浏览器设置，没有选择退出时删除cookie的选项，上网看有的人说要给cookie设置一个过期时间，我这里的写法没有设置过期时间相当于这次会话期间有效，浏览器退出会话结束就没有效了。笔者觉得这样麻烦就没有尝试，直接使用LocalStorage做存储，并在下文的使用中发现可行，所以继续记录LocalStorage的存储方式，使用cookie设置过期时间的机制如果可行的话那也是一种方法，看各自应用的需求而定。

使用LocalStorage

使用LocalStorage存储登录信息对于界面业务而言没有任何变动，只是将存储cookie的位置改用LocalStorage存储，获取cookie属性的位置改为在LocalStorage中获取。因此定义2个函数setLocalStorage(username, password, remember)和getLocalStorage()，用来存储和获取登录信息。

setLocalStorage(username, password, remember) {
  localStorage.setItem(COOKIE_K_REMEMBER, remember)
  localStorage.setItem(COOKIE_K_USERNAME, username)
  localStorage.setItem(COOKIE_K_PASSWORD, password)
},
getLocalStorage() {
  let remember = localStorage.getItem(COOKIE_K_REMEMBER);
  let username = localStorage.getItem(COOKIE_K_USERNAME);
  let password = localStorage.getItem(COOKIE_K_PASSWORD);
  this.loginForm.username = username
  this.loginForm.password = password
  if (remember === "1") {
    this.checked = true;
  } else {
    this.checked = false;
  }
}

在登录成功后跳转界面之前调用存储函数setLocalStorage()。

if (this.checked) {
  //this.setCookie(this.loginForm.username, this.loginForm.password, "1");
  this.setLocalStorage(this.loginForm.username, this.loginForm.password, "1");
} else {
  //this.setCookie("", "", "2");
  this.setLocalStorage("", "", "2");
}

在界面渲染后调用获取函数getLocalStorage()。

mounted() {
  //this.getCookie();
  this.getLocalStorage();
}

为了区别2者使用区别，在拷贝代码到简书时，在调用位置的注释笔者并没有删除，觉得这样更能直观的体现出2者的使用区别。而且笔者个人觉得使用LocalStorage用来做存储更简洁，key-value存啥取啥，代码写法比使用cookie舒服多了。主要是能解决问题嘛~