写一篇前端Vue怎么获取登录的用户名的博客

╰+攻爆jí腚メ 2023-10-12 20:32 16阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、使用全局状态管理（Vuex）获取登录用户名
 *  二、使用浏览器本地存储（localStorage）获取登录用户名
 *  三、通过后端接口获取登录用户名
 *  总结

--------------------

## 前言 ##

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