前端Vue如何获取登录的用户名或用户id代码实例
作者：几行名姓
在前端开发中,获取登录用户的用户名是一项常见的需求,这篇文章主要给大家介绍了关于前端Vue如何获取登录的用户名或用户id的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、使用全局状态管理（Vuex）获取登录用户名
创建 Vuex store，并在其中定义一个用于存储用户名的状态。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
username: '', // 存储登录用户名的状态
userid:'',//储存登录用户id
},
mutations: {
setUsername(state, username) {
state.username = username;
},
setUserid(state, userid) {
state.userid = userid;
},
},
});在登录成功后，将用户名保存到 Vuex store 中。
// 登录成功后的处理
this.$store.commit('setUsername', username);
this.$store.commit('setUserid', userid);在需要获取登录用户名的组件中，使用计算属性来获取用户名。
<template>
<div>
<p>Welcome, {{ username }}</p>
</div>
</template>
<script>
export default {
computed: {
username() {
return this.$store.state.username;
},
userid() {
return this.$store.state.userid;
},
},
};
</script>二、使用浏览器本地存储（localStorage）获取登录用户id
1.在登录成功后getUserid是我写的后端接口函数，SetUserId将用户id保存到 localStorage 中。
getUserid()
.then(response => {
// 获取用户ID成功
const userId = response.data;
setUserId(userId); // 保存用户id
})
.catch(error => {
// 获取用户ID失败，可能是因为用户未登录
console.error('获取用户ID失败:', error.response.data);
// 在这里处理未登录的情况，比如跳转到登录页
});在auth.js中
// 设置用户id到 localStorage 中
export function setUserId(userId) {
localStorage.setItem('userid', userId);
}
export function getUserId() {
return localStorage.getItem('userid');
}在需要获取登录用户名的组件中，通过读取 localStorage 来获取用户id。
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
userid:'',
};
},
mounted() {
this.user = getUserId('userid');
},
};
</script>总结
到此这篇关于前端Vue如何获取登录的用户名或用户id的文章就介绍到这了,更多相关Vue获取登录用户名或id内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！