vue中cookies的使用

有时候做登录时会有一个记住密码的需求,这个时候可以使用cookies把账号密码存起来,下次再进来就免去了输入账号密码的需求,如图:

原生cookies操作比较麻烦,这里我们使用js-cookies,先下载:

npm install --save js-cookie

安装成功后在需要的地方进行调用:

  import Cookies from "js-cookie";

 先看看在data中定义的表单数据:

  data() {
      return {
        //登录表单
        loginForm: {
          username: "", //用户名
          password: "", //密码
          captcha: "", //验证码的值
          isRemember: false, //是否记住密码
        },
      }
    },

写在methods中的函数:

 created() {
      //一进页面就先获取cookies里面的参数
      this.getCookie()
    },
    methods: {
      // 获取cookie参数
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const isRemember = Cookies.get("isRemember");
        this.loginForm.username =
          username == undefined ? this.loginForm.username : username;
        this.loginForm.password =
          password == undefined ? this.loginForm.password : decrypt(password);
        this.loginForm.isRemember =
          isRemember == undefined ? false : Boolean(isRemember);
        Cookies.remove('data');
      },
    },
    onLogin() {
      //点击登录函数时,如果勾选记住密码
      if (this.loginForm.isRemember) {
        // 把账号密码等参数存到cookies,设置时间为30天
        Cookies.set("username", this.loginForm.username, {
          expires: 30,
        });
        Cookies.set("password", this.loginForm.password, {
          expires: 30,
        });
        Cookies.set("isRemember", this.loginForm.isRemember, {
          expires: 30,
        });
      } else {
        //如果此时没有勾选记住密码,就把cookies里面的参数移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("isRemember");
      }
      //把登录名和用户名存好后,开始发接口请求数据,此处省略....
    },

cookies的使用方式: 储存、获取、删除三种

存:

Cookies.set('userName', '嘻嘻嘻', { expires: 3 });

取:

JSON.parse(Cookies.get('userName'))

删:

Cookies.remove('userName')

大功告成,完结!