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

简介: 作者主页:https://www.couragesteak.com/

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();
}
AI 代码解读

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>
AI 代码解读
<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>
AI 代码解读
目录
打赏
0
0
0
0
185
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
145 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
56 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
53 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
70 1
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
109 58
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章