vue當中的乙個長期儲存登入狀態的乙個實現

2021-09-28 18:25:56 字數 729 閱讀 1021

vue當中儲存使用者的乙個登入狀態

當時是登入元件(login.vue)是乙個main.vue中子元件,通過路由進入登入的元件當中

然後在使用者登入的時候,後台會傳乙個使用者名稱的引數給我,

我的那個main.vue元件中需要拿到這個引數,然後在頂部的登入註冊變成當前的使用者名稱

當時想用router-link中的query直接將我在axios下面獲取到的使用者資訊中的使用者名稱擷取下來,然後放到main.vue中的頂部然後顯示,結果就碰到問題了,重新整理的時候直接把我那個登入的狀態給刷沒了。

好吧,想辦法。

後面使用了sessionstorage,因為sessionstorage在頁面重新整理的時候,時間也不會丟失。

然後有人就會問為什麼不使用localstorage??

就是說如果設定localstorage 裡面儲存的資料沒有過期時間設定,就是說會長期儲存。

然後我通過axios請求到引數之後,使用父子元件的形式,將子元件的使用者名稱給了父元件。

that.$emit('name', that.username);

然後再main中接受了它

在js中

在return中定義了乙個username

return

用於接收儲存這個傳過來的name

然後在methods接受到了

methods:

}這樣試了一下結果發現可以了,重新整理也存在了,好了這個問題解決。

使用Vue寫乙個登入頁面

為了不浪費大家時間,所以我把這段話放在了開頭。上一部落格講到構建了乙個vue專案,現在在那個專案之上實現乙個登入頁面。因為用到了element ui元件,所以需要先安裝element ui元件,進入專案根目錄後 執行cnpm i element ui構建專案的目錄 自己寫的樣式 import sty...

使用Vue寫乙個登入頁面

上一部落格講到構建了乙個vue專案,現在在那個專案之上實現乙個登入頁面。因為用到了element ui元件,所以需要先安裝element ui元件,進入專案根目錄後 執行cnpm i element ui構建專案的目錄 自己寫的樣式 import style theme.css import sty...

Vue學習 使用vue編寫乙個登入模組

首先需要安裝nodejs vue工程搭建 搭建vue工程一般會使用到vue cli,通過npm install vue cli g來全域性安裝vue cli 然後通過vue init webpack來快速建立乙個專案,加入專案名為vue study,完成後執行npm install安裝依賴 接著執行...