Vue 中 使用 vue-cookies和vue-session

原创 已于 2023-10-28 15:52:53 修改 · 2.3w 阅读 · 52 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue #前端 #npm #存储

于 2019-05-17 10:33:18 首次发布
该博客介绍了在Vue中使用vue-session和vue-cookies的方法。包括使用npm安装这两个工具，在main.js中引入，以及具体的使用方式。同时提醒若要在cookies和session中存入对象，需先转换为json字符串。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取全平台资料

一、Vue中使用 vue-session

1.npm 安装  vue-session

npm install vue-session

2.在main.js中引入

import VueSession from 'vue-session'
Vue.use(VueSession)

3.使用

 this.$session.set("key",value); //存session
 this.$session.get("key"); //获取session

二、Vue中使用vue-cookies

1.npm  安装 vue-cookies

npm install vue-cookies --save

2.在main.js中引入

import VueCookies from 'vue-cookies'
Vue.use(VueCookies);

3.使用

 this.$cookies.set("key",value); //存cookies
 this.$cookies.get("key"); //获取cookies

4.注意：如果想在cookies和session中存入的是对象是，需要先转换为json字符串

来源：vue-cookies - npm

           vue-session - npm

vue项目使用cookie、localStorage和sessionStorage进行储存数据
qq_37916164的博客
03-29 3733
一，cookie的使用 1，首先加载模块 npm i js-cookie -S 2，在使用cookie的页面上进行引入 import Cookies from 'js-cookie' 3，使用方法 创建一个在整个网站上有效的Cookie Cookies.set('name', 'value'); 创建一个从现在起7天后过期的cookie，在整个站点上有效： Cookies.set('name', 'value', { expires: 7 }); 创建一个过期的cookie，.
vue 获取浏览器response cookie jsessionid获取_cookie和session
weixin_39647458的博客
12-08 7631
cookie产生背景HTTP协议本身是无状态的。服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时（发送同类请求：资源路径相同时携带cookie），浏览器把请求的网址连同该Cookie一同提...
vue用session存取数据
chen的博客
10-29 2822
/</</
分布式系统 - 分布式会话及实现方案
最新发布
埃泽漫笔
07-01 1018
Cookie技术是http状态保持在客户端的解决方案，Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。
vue使用session功能，保存和获取对象信息
noeal的博客
03-03 8393
vue操作session，保存和获取对象信息 const path = '/user' const tabsData = [] const tab = { path: '/' + path, name: name } tabsData.push(tab) // 保存 window.sessionStorage.setItem('tabsData', JSON.stringify(tabsData)) // 获取 JSON.parse(window.se
基于Vue2、vant、vue-cookies&axios技术实现瑞幸咖啡项目
m0_71479134的博客
07-23 1830
本次项目以Vue2来进行开发，主要是后端为前端提供接口从而实现页面的数据渲染，该瑞幸咖啡应用APP由多个模块组成，包括商品展示、购物车、订单管理等，商品顾名思义是以咖啡类为主，满足了用户咖啡订单需求。
使用vue-cookies操作cookie
qq_41288473的博客
03-04 1665
1.前言 在vue中如果想要操作cookie，除了使用之前我们自己封装好的操作cookie的方法之外，我们还可以使用vue-cookies插件，这是一个简单的Vue.js插件，专门用于在vue中处理浏览器的cookie操作，vue-cookies没有依赖关系，它可以独立存在，对vuejs友好。 2.安装vue-cookies npm install vue-cookies --save 3.引入vue-cookies 安装完毕后，我们需要在vue项目中明确引入vue-cookies。 import V
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
10-17
在前后端分离的架构中，Vue.js作为前端框架与Spring Boot作为后端服务进行交互时，常常会遇到跨域和Session、Cookie失效的问题。本文将详细介绍如何解决这些问题。 首先，跨域是由于浏览器的安全策略限制，同一源...
基于Vue 服务端Cookies删除的问题
12-11
有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。 另外两种是HTML5提供的： 不参与和服务器的...
vue之vue-cookies安装和使用说明
weixin_33736649的博客
01-07 447
vue之vue-cookies安装和使用说明npm官方链接：https://www.npmjs.com/package/vue-cookies 安装,在对应项目根目录下执行：npm install vue-cookies --save或者cnpm install --save vue-cookies 使用：import Vue from 'Vue'import VueCookies from ...
vue session storage cookie
12-16 198
sessionStorage.setItem('username', this.username); sessionStorage.setItem('role',res.data.ret_role); this.setCookie('user',this.username,72000); this.setCookie('pass',this.password);
vue如何获取session对象
2301_80484340的博客
03-08 748
使用Vue.js获取session对象1、使用原生JavaScript获取sessionStorage对象2、通过Vuex进行状态管理。选择哪种方法取决于应用的复杂性和状态管理的需求。对于简单的应用，直接使用sessionStorage可能更加方便，而对于复杂的应用，使用Vuex可以提供更好的状态管理和可维护性。评估应用需求：根据应用的复杂性选择合适的方法。结合使用：在需要时可以结合使用sessionStorage和Vuex，以便在不同的场景下灵活应对。安全性考虑。
vue中session的存取用法
ABSCYU的博客
03-21 1万+
存的方法 sessionStorage.setItem(“username（起一个名字为了取得时候用）”, this.value(这个是你要存进去的数据)); 取的方法 你可以定义一个变量然后去取他 this.（你取名的变量） = sessionStorage.getItem(“username” （你当时存的时候起的名字）); 这样只要是不去关闭页面他就一直存在 ...
vue 获取存在session里面的数据
ZHuan20211123的博客
03-15 6173
vue获取session中的值
热门推荐
qq_39391610的博客
09-09 3万+
letmyName=JSON.parse(sessionStorage.getItem("userInfo"));
vue-cookies的使用
weixin_47526134的博客
09-25 505
一、安装vue-cookies npm install vue-cookies --save 二、main.js中引入 import Vue from 'vue'; import VueCookies from "vue-cookies"; Vue.use(VueCookies); 三、在组件页面中设置基本使用方法 // 设置 this.$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure[, sameSi..
记录：vue使用cookie、vuex和localstorage、sessionStorage进行状态管理
by_side_with_sun的博客
06-16 5299
一.cookie、session、localStorage、sessionStorge总体介绍 cookie：浏览器储存，最大4KB，请求头会自动带上（最先验证的时候可以使用），vue中默认有效时间为浏览器关闭，django中可以自己设置。（位于google的setting里面，你可以去找找/控制台的Application里面都有） session：保存在服务器，配合着用挺好。（一般是放在数据...
一般处理程序获取session值
05-21 4862
1.要在一般处理程序中获取其他页面的session值，需要引用名空间： using System.Web.SessionState; 2.然后继承一个接口：IRequiresSessionState，如图： 3.然后就可以获得session值了: HttpContext context = new HttpContext(); string s =context.Session["V
在vue开发项目中如何使用token和session和cookie
06-10
在 Vue 项目中，可以使用 token、session 和 cookie 进行用户认证和授权。 1. Token Token 是一种无状态的认证方式，客户端通过用户名和密码向服务器发起请求，服务器验证成功后生成一个 token 并返回给客户端，客户端储存 token 后在每次请求时携带该 token，服务器通过验证 token 来识别用户身份。 在 Vue 项目中，可以使用 axios 库进行网络请求，并在请求头中添加 token： ```javascript axios.defaults.headers.common['Authorization'] = `Bearer ${token}` ``` 2. Session Session 是一种有状态的认证方式，用户在登录后，服务器会在后端为该用户创建一个 Session ID，并将该 ID 存储在 session 中，然后将该 ID 返回给客户端，客户端在每次请求时携带该 Session ID，服务器通过验证 Session ID 来识别用户身份。 在 Vue 项目中，可以使用 axios 库进行网络请求，并在请求头中添加 Session ID： ```javascript axios.defaults.headers.common['Cookie'] = `JSESSIONID=${sessionId}` ``` 3. Cookie Cookie 是一种客户端存储的认证方式，客户端在登录后，服务器会返回一个包含认证信息的 Cookie，客户端在每次请求时都会携带该 Cookie，服务器通过解析 Cookie 来识别用户身份。 在 Vue 项目中，可以使用 js-cookie 库进行 Cookie 的设置和读取： ```javascript import Cookies from 'js-cookie' // 设置 Cookie Cookies.set('token', token) // 读取 Cookie const token = Cookies.get('token') ``` 以上是在 Vue 项目中使用 token、session 和 cookie 进行用户认证和授权的方法，具体使用哪种方式，可以根据项目的需求和安全性来选择。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值