vue项目配合js-cookie实现记住密码功能

最新推荐文章于 2023-10-30 16:59:05 发布

原创最新推荐文章于 2023-10-30 16:59:05 发布 · 596 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用js-cookie插件实现登录后自动记住密码的功能，包括设置cookie、读取cookie及注意事项。

项目需要实现记住密码功能，由于之前没有开发过相关的功能，在查阅资料后，选择了操作cookie来实现。

实现思路：

用户输入账号密码后，请求登录接口，响应成功，若勾选了记住密码，就在cookie中存储下登录信息；
再次进入登录页面，首先判断是否有登录信息相关的cookie,如果存在则赋值；

通常操作cookie,都需要进行封装一些方法来进行相关操作。不过，这里选择了js-cookie插件，就不用再自行封装了。

js-cookie是一个轻量级的操作cookie的插件

A simple, lightweight JavaScript API for handling cookies

在项目中使用，有如下几种方法：

直接下载到本地，在项目中引入
cdn引入

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

npm 安装

npm install js-cookie --save

因为项目是vue项目，直接使用npm 安装依赖

在项目中的入口文件（main.js）全局引入

import Cookies from 'js-cookie'
Vue.prototype.$Cookies = Cookies

在用户登录成功时候，设置cookie，保存登录信息，并设置过期时间

this.$Cookies.set('name',value,{expires: 7})

再次进入登录页面，获取cookie

this.$Cookies.get('name')

html结构

<ul>
  <li>
    <van-field v-model="user_name" left-icon="user" placeholder="请输入用户名">
      <van-icon class="iconfont" class-prefix="icon-user" slot="left-icon" name="user" size="20" color="#959695"></van-icon>
    </van-field>
  </li>
  <li>
    <van-field v-model="password" type="password" placeholder="请输入密码">
      <van-icon class="iconfont" class-prefix="icon-pwd" slot="left-icon" name="pwd" size="20" color="#959695"></van-icon>
    </van-field>
  </li>
</ul>
<div class="checked-pwd">
  <van-checkbox v-model="checked" shape="square">记住密码</van-checkbox>
</div>
<div class="login-btn-wrap">
  <van-button round block type="info" @click="submit">登录</van-button>
</div>

js代码

export default {
  data() {
    return {
      user_name: "",
      password: "",
      checked: false
    };
  },
  created() {
    this.getCookies()
  },
  methods: {
    getCookies() {
      let loginInfo = this.$Cookies.getJSON("loginInfo") || {}
      if (Object.keys(loginInfo).length) {
        this.user_name = loginInfo.user_name
        this.password = loginInfo.password
        this.checked = loginInfo.checked
      } else {
        this.user_name = ""
        this.password = ""
        this.checked = false
      }
    },
    submit() {
      if (!this.user_name || !this.password) {
        this.$toast("请完善登录信息")
      } else {
        let reg = /^1[3456789]\d{9}$/
        if (!reg.test(this.user_name)) {
          this.$toast("请输入正确的手机号")
        } else {
          this.login()
        }
      }
    },
    async login() {
      let res = await this.$http.login({
        user_name: this.user_name,
        password: this.password
      });
      if (res && res.code == 0) {
        localStorage.setItem("token", res.data.token)
        if (this.checked) {
          let time = new Date(new Date().getTime() + 15 * 60 * 1000) // 15分钟后过期
          this.$Cookies.set(
            "loginInfo",
            {
              user_name: this.user_name,
              password: this.password,
              checked: this.checked
            },
            { expires: time }
          );
        } else {
          this.$Cookies.remove("loginInfo")
        }
        this.$toast({
          type: "success",
          message: "登录成功",
          forbidClick: true,
          onClose: () => {
            this.$router.push("/home")
          },
        });
      } else {
        this.$toast.fail(res.msg)
      }
    }
  }
}

注意

如果存储对象，可以使用下面的方法取出数据

this.$Cookies.getJSON("name")
# or
JSON.parse("name")

更多cookie设置，查看官方文档 js-cookie