Vue项目实操cookie相关操作封装

有勇气的牛排 462 前端 2023-05-18 22:34:48

文章目录

1 介绍
2 utils
3 Test.vue

1 介绍

在vue中通常使用axios进项http请求，但是axios不带cookie，这里可自己获取cookie，放到参数中进行登录验证等，方法不唯一。

2 utils

cookie.js

/**
 * 读取cookie，
 * 需要注意的是cookie是不能存中文的，如果需要存中文，解决方法是后端先进行编码encode()，
 * 前端取出来之后用decodeURI('string')解码。（安卓可以取中文cookie，IOS不行）
 * */
export const b_getCookie = (c_name) => {
  var name = c_name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) != -1) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

/**
 * 设置cookie
 * c_name: cookie的名字，
 * value : cookie值，
 * expiredays: 过期时间（天数）
 * */
export const b_setCookie = (c_name, value, expiredays) => {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}


/**
 * 删除cookie
 * c_name: cookie的名字，
 * */
export const b_delCookie = (c_name) => {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(c_name);
  if (cval != null)
    document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();
}

3 Test.vue

<template>
  <div>
    <el-row>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button @click="getCookie">获取cookie</el-button>
      <el-button @click="setCookie">设置cookie</el-button>
    </el-row>
  </div>
</template>

<script>
  import {b_getCookie, b_setCookie} from "../utils/cookie";

  export default {
    name: "Test",
    data() {
      return {
        input: ''
      }
    },
    methods: {
      getCookie() {
        console.log("==========获取cookie===========")
        let username = b_getCookie("username")
        let password = b_getCookie("password")
        console.log(username);
        console.log(password);
      },
      setCookie() {
        console.log("设置cookie");
        b_setCookie("c_key", "c_value", 30)
      }
    }
  }
</script>

<style scoped>

</style>

<h3>文章目录</h3><ul><ul><li><a href="#1__1">1 介绍</a></li><li><a href="#2_utils_4">2 utils</a></li><li><a href="#3_Testvue_52">3 Test.vue</a></li></ul></ul> <h2><a id="1__1"></a>1 介绍</h2> 在vue中通常使用axios进项http请求，但是axios不带cookie，这里可自己获取cookie，放到参数中进行登录验证等，方法不唯一。 <h2><a id="2_utils_4"></a>2 utils</h2> <code>cookie.js</code> <pre><div class="hljs"><code class="lang-javascript">/** * 读取cookie， * 需要注意的是cookie是不能存中文的，如果需要存中文，解决方法是后端先进行编码encode()， * 前端取出来之后用decodeURI('string')解码。（安卓可以取中文cookie，IOS不行） * */ export const b_getCookie = (c_name) => { var name = c_name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(name) != -1) { return c.substring(name.length, c.length); } } return ""; } /** * 设置cookie * c_name: cookie的名字， * value : cookie值， * expiredays: 过期时间（天数） * */ export const b_setCookie = (c_name, value, expiredays) => { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); } /** * 删除cookie * c_name: cookie的名字， * */ export const b_delCookie = (c_name) => { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getCookie(c_name); if (cval != null) document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString(); } </code></div></pre> <h2><a id="3_Testvue_52"></a>3 Test.vue</h2> <pre><div class="hljs"><code class="lang-html"><template> <div> <el-row> <el-input v-model="input" placeholder="请输入内容"></el-input> <el-button @click="getCookie">获取cookie</el-button> <el-button @click="setCookie">设置cookie</el-button> </el-row> </div> </template> </code></div></pre> <pre><div class="hljs"><code class="lang-javascript"><script> import {b_getCookie, b_setCookie} from "../utils/cookie"; export default { name: "Test", data() { return { input: '' } }, methods: { getCookie() { console.log("==========获取cookie===========") let username = b_getCookie("username") let password = b_getCookie("password") console.log(username); console.log(password); }, setCookie() { console.log("设置cookie"); b_setCookie("c_key", "c_value", 30) } } } </script> <style scoped> </style> </code></div></pre>