写一篇前端Vue怎么获取登录的用户名的博客
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
系列文章目录
前言
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。
在前端开发中,获取登录用户的用户名是一项常见的需求。Vue 是一种流行的前端框架,提供了多种方法来获取登录用户名。本文将详细介绍 Vue 前端获取登录用户名的几种方法,帮助你在实际项目中轻松应用。
一、使用全局状态管理(Vuex)获取登录用户名
创建 Vuex store,并在其中定义一个用于存储用户名的状态。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
username: '', // 存储登录用户名的状态
},
mutations: {
setUsername(state, username) {
state.username = username;
},
},
});
在登录成功后,将用户名保存到 Vuex store 中。
// 登录成功后的处理
this.$store.commit('setUsername', username);
在需要获取登录用户名的组件中,使用计算属性来获取用户名。
<template>
<div>
<p>Welcome, {{ username }}</p>
</div>
</template>
<script>
export default {
computed: {
username() {
return this.$store.state.username;
},
},
};
</script>
二、使用浏览器本地存储(localStorage)获取登录用户名
1.在登录成功后,将用户名保存到 localStorage 中。
// 登录成功后的处理
localStorage.setItem('username', username);
在需要获取登录用户名的组件中,通过读取 localStorage 来获取用户名。
<template>
<div>
<p>Welcome, {{ username }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
mounted() {
this.username = localStorage.getItem('username');
},
};
</script>
三、通过后端接口获取登录用户名
在登录成功后,后端接口返回用户名的信息。
在前端通过 API 调用后端接口来获取用户名。
// 调用后端接口获取用户名
axios.get('/api/user')
.then(response => {
this.username = response.data.username;
})
.catch(error => {
console.error(error);
});
总结
以上是几种常见的获取登录用户名的方法,你可以根据项目需求选择适合的方式。无论是使用全局状态管理、浏览器本地存储还是后端接口,都能满足你在 Vue 前端获取登录用户名的需求。
希望本文能对你在 Vue 前端获取登录用户名方面有所帮助。如有任何疑问或意见,欢迎留言讨论。感谢阅读!
需要系统源码或者BiShe加V
ID:talon712
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献41条内容
所有评论(0)