写一篇前端Vue怎么获取登录的用户名的博客-Toy模板网

这篇具有很好参考价值的文章主要介绍了写一篇前端Vue怎么获取登录的用户名的博客。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

系列文章目录

前言

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。
vue获取用户id,vue,javascript,开发语言,ecmascript

在前端开发中，获取登录用户的用户名是一项常见的需求。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);
  });