Table of Contents of Series Articles
Article directory
Preface
In front-end development, obtaining the username of the logged-in user is a common requirement. Vue is a popular front-end framework that provides several methods to get the login username. This article will introduce in detail several methods for the Vue front-end to obtain the login username, to help you easily apply it in actual projects.
1. Use global state management (Vuex) to obtain the login user name
Create a Vuex store, and define a state for storing usernames in it.
// 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;
},
},
});
After successful login, save the username to the Vuex store.
// 登录成功后的处理
this.$store.commit('setUsername', username);
In the component that needs to get the login username, use a computed property to get the username.
<template>
<div>
<p>Welcome, {
{
username }}</p>
</div>
</template>
<script>
export default {
computed: {
username() {
return this.$store.state.username;
},
},
};
</script>
2. Use the browser's local storage (localStorage) to obtain the login user name
1. After successful login, save the user name to localStorage.
// 登录成功后的处理
localStorage.setItem('username', username);
In the component that needs to obtain the login user name, obtain the user name by reading localStorage.
<template>
<div>
<p>Welcome, {
{
username }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
mounted() {
this.username = localStorage.getItem('username');
},
};
</script>
3. Obtain the login user name through the back-end interface
After successful login, the backend interface returns the username information.
In the front end, the user name is obtained by calling the back-end interface through the API.
// 调用后端接口获取用户名
axios.get('/api/user')
.then(response => {
this.username = response.data.username;
})
.catch(error => {
console.error(error);
});
Summarize
The above are several common methods for obtaining login usernames. You can choose the appropriate method according to your project needs. Whether you use global state management, browser local storage or back-end interface, you can meet your need to obtain the login username on the Vue front-end.
I hope this article can help you get the login username in the Vue front-end. If you have any questions or comments, please leave a message for discussion. Thanks for reading!
Requires system source code or BiShe plus V
ID:talon712