vue3.0实现登录成功以后，如何写入cookie保存token，读取cookie，并显示用户名

最新推荐文章于 2024-06-12 15:10:49 发布
最新推荐文章于 2024-06-12 15:10:49 发布
阅读量5.7k 收藏 10
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46613478/article/details/106788264
版权
本文介绍在Vue3.0应用中如何在登录成功后将token存入cookie，以及如何读取cookie并展示用户名的通用方法。
摘要由CSDN通过智能技术生成

一、 分装成公用方法

 methods: {
   
	      setCookie(name, value, exdays) {
   
	      //name  :表示cookie的名称，比如token
	      //value  :表示cookie的值
	      //exdays  :表示cookie的有效时间
	        var d = new Date();
	        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	        var expires = "expires=" + d.toGMTString();
	        document.cookie = name + "=" + value + "; " +</
最低0.47元/天 解锁文章
jingjinglove-
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
VUE3登录后保存token，使用LocalStroge
极客神殿
09-07 1130
存在的时候，才能跳转到内容页。1.登录成功后，后端会返回一个。//判断用户名或密码是否为空。'用户名和密码不能为空'2.在路由守卫这里，判断。
vue.js 中cookie的封装
sweet_note的博客
04-13 1208
//获取cookie、 export function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return (arr[2]); else return null; }//设置cookie,增加
如何在Vue3中使用cookie保存用户信息？
最新发布
有我更精彩的博客
06-12 988
Cookie是一种用来在客户端存储小块数据的机制，通常由服务器端生成，并以键值对的形式保存在用户的浏览器中。它主要用于会话管理、用户个性化设置以及跟踪用户行为等。
vue中访问后台所携带的token值为什么会放在cookie中，而不是放在localStorage和sessionStorage中
热门推荐
weixin_44647865的博客
03-23 3万+
vue中访问后台所携带的token值为什么会放在cookie中，而不是放在localStorage和sessionStorage中 1、因为cookie采取同源策略，只有相同域名的网页才能获取域名对应的cookie，而别人在其他域名无法获取你的cookie，也就无法获取你的token，所以当别人伪造请求时，token和cookie中的token是绝对不一致的； cookie和session 相同：都是用来跟踪浏览器用户身份的会话方式； 区别： 保持状态：cookie保存在浏览器端，session保存在服务端
【Vue 3.x】系统token的设计与实现
IU
05-24 1087
做前端的都应该知道，token的处理是几乎在每一个项目都会出现的场景。现在我简单归类出几种场景，并且逐一解答。
vue 前端登录获取token后添加到cookie，并使用token获取其他数据（添加到请求头中）
w199809w的博客
04-18 2377
【代码】vue 前端登录获取token后添加到cookie，并使用token获取其他数据（添加到请求头中）
vue设置cookie和路由守卫
Pert的博客
08-10 5703
vue cookie
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
10-17
在前后端分离的架构中，Vue.js作为前端框架与Spring Boot作为后端服务进行交互时，常常会遇到跨域和Session、Cookie失效的问题。本文将详细介绍如何解决这些问题。 首先，跨域是由于浏览器的安全策略限制，同一源...
vue使用localStorage保存登录信息 适用于移动端、PC端
10-16
当用户成功登录时，`Login` action会被调用，通过`setlocalStorage(data.token)`将服务器返回的token保存到`localStorage`中，然后调用`SET_TOKEN` mutation将token更新到Vuex的状态中。 `GetInfo` action用于获取...
详解vue后台系统登录态管理
12-04
登录成功后，将服务器返回的token保存到Vuex的state和cookie中，同时将用户信息存入localStorage；登出时，清除token、localStorage中的用户信息并清空Vuex状态。 在`getter.js`中，我们定义了一个`userInfo` ...
vue项目持久化存储数据的实现代码
10-17
VueCookie.set('token', token, { expires: '30s' }); // 设置有效期为30秒 } }, actions: {} }); // 在组件中调用 import { mapMutations } from 'vuex'; export default { methods: { login() { this....
解决vue刷新页面以后丢失store的数据问题
11-19
当用户登录成功后，服务端返回一个Token，这个Token可以是JWT（JSON Web Token）或其他类型的令牌。前端将Token存储在本地，通常是localStorage或Vuex中，以便在后续的API请求中附带Token，以验证用户身份。 **创建...
在vue中操作cookie
weixin_45468454的博客
05-15 820
在vue中如果想要操作cookie，可以使用vue-cookies插件，这是一个简单的Vue.js插件，专门用于在vue中处理浏览器的cookie操作，vue-cookies没有依赖关系，它可以独立存在，对vuejs友好。 使用方法 安装vue-cookies npm install vue-cookies --save 在vue中引用，进入mainjs文件中添加 import Vue from 'vue' import VueCookies from 'vue-cookies' Vue.use(VueC
【Python百日进阶-Web开发-Vue3】Day522 - Vue3后台系统 02：登录，保存token
岳涛的博客
02-18 527
src文件夹下，新建request文件夹，新建request.ts文件。request文件夹下，新建api.ts文件。
vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中
周家大小姐
12-26 4981
需求:用户点击登录的时候获取token存取下来,然后放入请求拦截,因为用户上拉刷新下拉加载的时候需要用到;不然用户一刷新,服务端都不知道用户是谁了 目录   请求存储token: 请求拦截,及请求错误的响应拦截 路由守卫(用来判断用户有没有登录;如果没有的话只能进入登录和注册页面) 觖析token存储到vuex中 请求存储token: login.vue页面 //请求的时候存储...
vue3中cookie的使用
xjc2333333的博客
05-13 1万+
cookie使用最多的地方想必是保存用户的账号与密码，可以避免用户每次登录时都要重新输入 1.vue中cookie的安装 在终端中输入命令npm install vue-cookies --save，即可安装cookies，安装之后在main.js文件中写下以下代码 import { createApp } from 'vue' import VueCookies from 'vue-cookies' const app = createApp(App) app.config.globalPro
vue3 登录记住密码 存到cookie里设置过期时间，同时账号密码通过des加密
Smile_666666的博客
01-11 1314
vue3 登录记住密码 存到cookie里设置过期时间 const userForm = reactive({ phone: "", // 手机号码 username: "", // 账号 password: "", // 密码 authCode: "", // 验证码 checked: false, // 记住密码 }) // 记住密码 function set
【VUE项目实战】13、登录与退出功能-保存token和页面权限控制
程序猿之洞
09-04 3445
接上篇《12、登录与退出功能-请求登录》 上一篇我们讲解了点击登录后发起登录请求的操作，本篇我们来讲解登录成功之后，保存登录会话状态的操作。 一、登录后的事件简述 我们在登录成功之后，需要完成以下内容，来保持登录效果以及跳转登录首页： 1、将登录成功后的token，保存到客户端的sessionStorage中 1.1 项目中除了登录之外的其他API接口，必须在登录后才能访问 1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStotage中。 2、通过编程式导航跳转到后台
为什么要用cookie和session【多测师_王sir】
多测师_王sir的博客
08-28 658
为什么要用Session和Cookie？ 简单一句话，因为Session和Cookie可以记录用户状态信息。 这到底啥意思呢？ 一、动态网页的出现 什么是静态网页 含义：一个网页的内容是HTML代码编写的，文字、图片等内容均可通过HTML代码指定了 优势：加载速度快，编写简单 劣势：可维护性差，扩展性差，不能根据URL显示不同的内容；例如：在URL传入一个name参数想在网页上显示，...
vue2 登录读取响应头Set-Cookie 做一个登录过期
07-16
好的，我明白了您的问题。以下是一个示例代码，演示了在Vue2中如何读取响应头中的`Set-Cookie`字段，并处理登录过期的情况。 ```vue // 在某个请求拦截器中 axios.interceptors.request.use( function(config) { // 读取本地存储的会话标识信息 const sessionToken = localStorage.getItem('sessionToken'); if (sessionToken) { // 将会话标识信息添加到请求头中 config.headers['Authorization'] = sessionToken; } return config; }, function(error) { return Promise.reject(error); } ); // 在某个响应拦截器中 axios.interceptors.response.use( function(response) { // 检查响应头中的Set-Cookie字段 const cookies = response.headers['set-cookie']; if (!cookies || cookies.length === 0) { // 没有有效的标识信息，说明登录已过期，执行相应操作 // 清空本地存储的会话标识信息 localStorage.removeItem('sessionToken'); // 跳转到登录页面或者弹出提示框等 // ... } return response; }, function(error) { return Promise.reject(error); } ); ``` 在上述示例中，我们使用了`axios`作为HTTP请求库，并通过拦截器来处理请求和响应。在请求拦截器中，我们读取了本地存储中的会话标识信息（假设存储在`localStorage`中），并将其添加到请求头的`Authorization`字段中。在响应拦截器中，我们检查响应头中的`Set-Cookie`字段。如果该字段为空或不包含有效的标识信息，说明登录已过期，我们可以执行相应的操作，比如清空本地存储的会话标识信息，并进行跳转或弹出提示框等操作。 请注意，以上代码只是一个示例，具体的实现方式可能因您的应用程序架构和需求而有所不同。您可以根据自己的实际情况进行修改和调整。希望对您有所帮助！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值