前端Vue如何獲取登錄的用戶(hù)名或用戶(hù)id代碼實(shí)例
一、使用全局狀態(tài)管理（Vuex）獲取登錄用戶(hù)名
創(chuàng)建 Vuex store，并在其中定義一個(gè)用于存儲(chǔ)用戶(hù)名的狀態(tài)。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
username: '', // 存儲(chǔ)登錄用戶(hù)名的狀態(tài)
userid:'',//儲(chǔ)存登錄用戶(hù)id
},
mutations: {
setUsername(state, username) {
state.username = username;
},
setUserid(state, userid) {
state.userid = userid;
},
},
});在登錄成功后，將用戶(hù)名保存到 Vuex store 中。
// 登錄成功后的處理
this.$store.commit('setUsername', username);
this.$store.commit('setUserid', userid);在需要獲取登錄用戶(hù)名的組件中，使用計(jì)算屬性來(lái)獲取用戶(hù)名。
<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>二、使用瀏覽器本地存儲(chǔ)（localStorage）獲取登錄用戶(hù)id
1.在登錄成功后getUserid是我寫(xiě)的后端接口函數(shù)，SetUserId將用戶(hù)id保存到 localStorage 中。
getUserid()
.then(response => {
// 獲取用戶(hù)ID成功
const userId = response.data;
setUserId(userId); // 保存用戶(hù)id
})
.catch(error => {
// 獲取用戶(hù)ID失敗，可能是因?yàn)橛脩?hù)未登錄
console.error('獲取用戶(hù)ID失敗:', error.response.data);
// 在這里處理未登錄的情況，比如跳轉(zhuǎn)到登錄頁(yè)
});在auth.js中
// 設(shè)置用戶(hù)id到 localStorage 中
export function setUserId(userId) {
localStorage.setItem('userid', userId);
}
export function getUserId() {
return localStorage.getItem('userid');
}在需要獲取登錄用戶(hù)名的組件中，通過(guò)讀取 localStorage 來(lái)獲取用戶(hù)id。
<template>
<div>
</div>
</template>
<script>
export default {
data() {
return {
userid:'',
};
},
mounted() {
this.user = getUserId('userid');
},
};
</script>總結(jié)
到此這篇關(guān)于前端Vue如何獲取登錄的用戶(hù)名或用戶(hù)id的文章就介紹到這了,更多相關(guān)Vue獲取登錄用戶(hù)名或id內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3中如何使用iframe嵌入vue2頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)
這篇文章主要介紹了ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue中使用create-keyframe-animation與動(dòng)畫(huà)鉤子完成復(fù)雜動(dòng)畫(huà)
這篇文章主要介紹了Vue中使用create-keyframe-animation與動(dòng)畫(huà)鉤子完成復(fù)雜動(dòng)畫(huà)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vue?調(diào)用攝像頭掃描條碼功能實(shí)現(xiàn)代碼
本文介紹了如何使用Vue.js和jsQR庫(kù)來(lái)實(shí)現(xiàn)調(diào)用攝像頭并掃描條碼的功能,通過(guò)安裝依賴(lài)、獲取攝像頭視頻流、解析條碼等步驟,實(shí)現(xiàn)了從開(kāi)始掃描到停止掃描的完整流程,同時(shí),還強(qiáng)調(diào)了瀏覽器兼容性、HTTPS環(huán)境、權(quán)限問(wèn)題和性能優(yōu)化的重要性,感興趣的朋友一起看看吧2025-03-03
頁(yè)面tooltip組件限制工具函數(shù)使用示例詳解
這篇文章主要為大家介紹了頁(yè)面tooltip組件的限制工具函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了vue子組件中mounted取不到props中的值情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Ant Design Vue全局對(duì)話(huà)確認(rèn)框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對(duì)話(huà)確認(rèn)框(confirm)的回調(diào)不觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Element Cascader 級(jí)聯(lián)選擇器的使用示例
這篇文章主要介紹了Element Cascader 級(jí)聯(lián)選擇器的使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄(推薦)
這篇文章主要介紹了vue中js判斷長(zhǎng)時(shí)間不操作界面自動(dòng)退出登錄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭）
這篇文章主要介紹了vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11