前端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);
在需要获取登录用户名的组件中,使用计算属性来获取用户名。
Welcome, {{ username }}
export default { computed: { username() { return this.$store.state.username; }, userid() { return this.$store.state.userid; }, }, };
二、使用浏览器本地存储(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。
export default { data() { return { userid:'', }; }, mounted() { this.user = getUserId('userid'); }, };
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。