vue登陆成功在右上角显示用户名

最新推荐文章于 2024-07-11 10:56:46 发布
最新推荐文章于 2024-07-11 10:56:46 发布
阅读量1.4w 收藏 29
点赞数 4
分类专栏： 前端 文章标签： vue使用js-cookie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41588568/article/details/89521449
版权

第一想法是用cookie实现。

然后就百度了一下，发现一个好用的工具 js-cookie 工具

首先项目根目录下安装

cnpm i js-cookie

 然后在页面引入

import Cookies from 'js-cookie';

最后就可以在页面使用了

设置cookie

 

 获取cookie

 

qq_41588568
关注
专栏目录
基于SpringCloud+vue+element设计的手机端网络购物商城
02-13 1046
本系统利用springboot和mysql技术作为系统的后台，利用vue技术和element ui 搭建系统的前台。前台包括用户前台页面和后台管理页面。 用户前台页面必须满足用户购物的需求，要有购物车、订单、下单和收藏等功能。系统后台管理页面需要对店铺的商品、用户和订单进行管理，同时需要统计店铺的各种销量数据等等。通过本系统可以解决用户可以通过移动互联网不用安装移动应用进行网上购物，同时满足了商家拓展线上销售的渠道。
【自用】VUE 获取登录用户名 显示在其他页面上
要思考，要努力
11-29 4985
在需要使用的地方使用 插值表达式 {{xxx}} 来使用它！在登录页面中引入 js-cookie 依赖。在其他页面中引入 js-cookie 依赖。（请注意，我们需要用刚写好的函数来引用）1.2 登录后，主页已经显示用户名了！安装 js-cookie 依赖。
vue 前端用户登录
weixin_44085780的博客
10-31 1168
做用户登陆的功能，想要实现的效果是，用户访问之后，会自行判断该页面是否需要身份验证 默认的只有主页和登陆页面不需要身份验证，所以如果用户访问其他页面会自动跳转到登陆页面 用户登陆成功，会回到登陆之前的页面。 如果用户点击退出，会回到主页。 使用router.beforeEach,实现路由跳转的拦截功能 每个路由都设置了是否登录的参数 meta:{ requireAuth:true /*判断进入...
VUE div的右上角的角标/标签
weixin_44443380的博客
06-24 687
【代码】VUE div的右上角的角标/标签。
Vue+Element-UI获取登录用户名显示在页面右上角
qq_42207453的博客
12-09 1万+
①先查看package.json中有没有引入js-cookie依赖 ②没有的话，要引入依赖 ③之后在你的登录页面中使用 ④在想要使用的地方使用
vue-admin-template之右上角显示用户登录后的个人信息（用户名、公司等···）
最新发布
YGGZZZ的博客
07-11 279
vue-admin-template之右上角显示用户登录后的个人信息（用户名、公司等···）
Vue3 登录注册（登录后显示用户姓名）
july_29的博客
08-16 6119
记录在vue3学习中遇到的问题以及解决方法 登录注册其实很简单，当然，如果在一开始不会的状态下还是很难想出的。 我们可以给登录和注册按钮加v-if进行判断，当我们处于未登录的时候，我们让他显示，参数为true，此时用户的信息也绑定v-if，值和登录注册的值取反，我们可以用感叹号！来进行值的取反。当我们登录成功后，我们给把登录注册的值修改成false，这时候登录注册就不显示了，由于用户信息和登录注册取反，这时候用户信息就显示出来了，退出登录原理也和上面一致，当我们点击后，修改值来使其隐藏或显示。 关键 现在我
Vue实现登录以及登出
weixin_57259948的博客
09-23 1452
首先先了解一下，我们的效果实现流程 首先登录概述及业务流程和相关技术点 1.登录页面的布局 2.创建两个Vue.js文件 3.一个我们来做登录页和注册页 4.登录页面的布局 5.配置路由 6.登录表单的数据绑定 7.登录表单的验证规则 ...
Vue 实现带登录状态的导航栏
narrator_y的博客
04-10 2417
在写vue项目的时候常会遇到 带登录状态的导航栏 设计，当用户登录后“点击登录”则变换成为用户的具体信息，例如 目前我的做法是将此导航栏写在App.vue文件中，将用户的token存在sessionStorage中，根据token是否存在来渲染右上角的内容。大致思想是：（下图为App.vue部分代码） <a-dropdown v-if="user">用户登录了</a-dropd...
vue3-admin商品管理后台项目(登录页开发和功能实现)
lovestar墨竹的博客
10-17 4308
vue3-admin商品管理后台项目（登录开发和功能实现）
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
vue 做登陆页面 （ 登陆成功后去掉注册和登陆按钮 显示用户名）
qq_39510798的博客
07-18 2万+
1.当登陆成功  显示用户名且去掉登陆和注册按钮 2.data里声明  后  就在登陆的方法里调用啦 下面说一下登陆的方法。 1.登陆的按钮代码在第一张图片里 2.登陆的弹出框 3.方法 ps：另一种组件传值的接收（下面的第二张图片） 是  admin   用户 就显示  用户管理栏目 不是这个用户  就隐藏这个栏目      ...
写一篇前端Vue怎么获取登录的用户名的博客
pleaseprintf的博客
06-25 6790
在前端开发中，获取登录用户的用户名是一项常见的需求。Vue 是一种流行的前端框架，提供了多种方法来获取登录用户名。本文将详细介绍 Vue 前端获取登录用户名的几种方法，帮助你在实际项目中轻松应用。以上是几种常见的获取登录用户名的方法，你可以根据项目需求选择适合的方式。无论是使用全局状态管理、浏览器本地存储还是后端接口，都能满足你在 Vue 前端获取登录用户名的需求。希望本文能对你在 Vue 前端获取登录用户名方面有所帮助。如有任何疑问或意见，欢迎留言讨论。需要系统源码或者BiShe加V。
vue写项目时，当用户名存在Cookie中，登录后怎么立即显示到界面上
qq_67996188的博客
06-03 229
vue写项目时，当用户名存在Cookie中，登录后怎么立即显示到界面上。
前端Vue怎么获取登录的用户名或用户id
zyhang666的博客
05-10 2303
1.在登录成功后getUserid是我写的后端接口函数，SetUserId将用户id保存到 localStorage 中。在需要获取登录用户名的组件中，通过读取 localStorage 来获取用户id。创建 Vuex store，并在其中定义一个用于存储用户名的状态。在登录成功后，将用户名保存到 Vuex store 中。在需要获取登录用户名的组件中，使用计算属性来获取用户名。
写一篇前端Vue怎么获取登录的用户名的博客_vue获取登录用户信息 全局使用(1)
2401_84447390的博客
05-09 654
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。在前端开发中，获取登录用户的用户名是一项常见的需求。Vue 是一种流行的前端框架，提供了多种方法来获取登录用户名。本文将详细介绍 Vue 前端获取登录用户名的几种方法，帮助你在实际项目中轻松应用。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。
vue 后台系统 获取用户名并显示
kurcp的博客
01-06 4491
vue 后台系统 获取用户名并显示
SpringBoot+vue实现右侧登录昵称展示
5年编程经验的老猿。
05-05 552
在 SpringBoot和 Vue.js 结合的项目中实现右侧登录昵称展示，通常涉及到前端的用户界面展示和后端的用户认证逻辑。
vue登录后显示用户名 代码
03-12
可以使用Vue的数据绑定功能，在登录成功后将用户名存储在Vue实例的data属性中，然后在页面中使用{{}}语法将其显示出来。具体代码实现可以参考以下示例： 1. 在Vue实例中定义一个data属性，用于存储用户名： ``` data: { username: '' } ``` 2. 在登录成功后，将用户名赋值给data属性中的username： ``` this.username = '张三'; ``` 3. 在页面中使用{{}}语法将用户名显示出来： ``` <p>欢迎，{{username}}！</p> ```
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值