vue项目实现表单登录页保存账号和密码到cookie功能

实现表单登录页保存账号和密码到Cookie功能的完整攻略如下：

1. 安装依赖

在Vue项目中使用js-cookie插件，需要先安装依赖。

npm install js-cookie --save

2. 实现登录逻辑

在登录功能中，需要实现同时记住账号和密码的选择框。当选择记住账号和密码时，将账号和密码存储到Cookie中。这里以使用axios进行登录请求和处理Cookie的示例代码为例。

<template>
  <div>
    <h2>Login</h2>
    <form>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username"/>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password"/>
      </div>
      <div>
        <input type="checkbox" id="remember" v-model="remember"/>
        <label for="remember">Remember me</label>
      </div>
      <button type="button" @click="handleLogin">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
import Cookies from 'js-cookie';

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      remember: false,
    };
  },
  methods: {
    handleLogin() {
      const {username, password, remember} = this;
      axios.post('/api/login', {username, password})
        .then(res => {
          const {data} = res;
          if (data.code === 200) {
            if (remember) {  // 保存Cookie
              Cookies.set('username', username, {expires: 7});  // 保存7天
              Cookies.set('password', password, {expires: 7});
            } else {  // 删除Cookie
              Cookies.remove('username');
              Cookies.remove('password');
            }
            alert('Login success');
          } else {
            alert(data.msg);
          }
        })
        .catch(err => {
          console.error(err);
          alert('Login error');
        });
    },
  },
  beforeMount() {
    // 读取Cookie保存的账号和密码
    const username = Cookies.get('username');
    const password = Cookies.get('password');
    if (username && password) {
      this.username = username;
      this.password = password;
      this.remember = true;
    }
  },
};
</script>

在登录成功后，根据选择框是否勾选来判断是否需要保存到Cookie中，并设置Cookie的有效期为7天。登录页面在组件beforeMount生命周期中读取Cookie中保存的账号和密码来恢复原先的表单数据。如果用户没有选择“记住我”选项，则在Cookie中删除保存的账号和密码。

3. 示例说明

示例1：保存账号和密码到Cookie

用户勾选“记住我”选项，完成登录后，账号和密码会保存到Cookie中。当用户下次访问登录页时，Cookie中保存的账号和密码会自动填充到表单中，以便用户进行手动输入。

示例2：删除Cookie中保存的账号和密码

用户在登录页点击“注销”按钮，系统会清空用户在Cookie中保存的账号和密码。用户再次访问登录页时，账号和密码不会自动填充到表单中。