小編給大家分享一下Vue中保存用戶(hù)登錄狀態(tài)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有龍圩免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

首先我們假設(shè)，這里的登錄組件（register.vue）是App.vue組件的子組件，是通過(guò)路由進(jìn)入登錄組件的。

登錄組件中用戶(hù)點(diǎn)擊登錄后，后臺(tái)會(huì)傳過(guò)來(lái)一個(gè)用戶(hù)名，我的App.vue組件中需要拿到這個(gè)用戶(hù)名，并將上面的“登錄注冊(cè)”字樣變?yōu)椤坝脩?hù)名”。

為了保證用戶(hù)刷新后用戶(hù)名不會(huì)消失，這里我用到了sessionStorage

代碼如下:

register.vue中用戶(hù)點(diǎn)擊登錄觸發(fā)signIn方法

   signIn(){
    this.formData = $(".form").serialize();
    var that = this;
    this.$http.get("/api/user", this.formData)
     .then(response => {
      that.userName = response.data.data.user.userName;
      that.userHead = response.data.data.userHead;
      that.$emit('userSignIn', that.userName);
     })
     .catch(error => {
      console.log(error);
     });
   }

這里為了測(cè)試我直接mock的數(shù)據(jù)，真實(shí)情況應(yīng)該是this.$http.post

這里的重點(diǎn)是那句

 that.$emit('userSignIn', that.userName);

向父組件（App.vue）傳值

App.vue代碼HTML

<keep-alive>
   <router-view @userSignIn="userSignIn"></router-view>
</keep-alive>

App.vue代碼JS

export default {

 data(){
  return{
   userName: sessionStorage.userName
  }
 },

 methods:{
  //子組件(register)將用戶(hù)名傳過(guò)來(lái)
  userSignIn(userName){
   sessionStorage.userName = userName;
   this.userName = sessionStorage.userName;
  }
 }
}

這樣父組件就可以使用用戶(hù)名，保持了登錄狀態(tài)，并且因?yàn)槭褂昧藄essionStorage，刷新頁(yè)面也可以保持。

以上是“Vue中保存用戶(hù)登錄狀態(tài)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：Vue中保存用戶(hù)登錄狀態(tài)的示例分析
分享URL：http://www.chinadenli.net/article24/joipje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站改版、用戶(hù)體驗(yàn)、品牌網(wǎng)站制作、Google、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)