Vue項目之用戶登錄詳解

用戶登錄

大致思路：
寫好靜態(tài)布局的后，點擊默認頭像，彈出登錄框，輸入賬號密碼，點擊登錄按鈕時獲取到賬號密碼，作為參數(shù)傳給登錄的接口，發(fā)起登錄請求，請求成功以后，后端接口會返回一個對象，這個對象里面就包含token，和用戶信息userinfo（包括用戶登錄名字，頭像等），此時，代表登錄成功，只是前端還沒有把數(shù)據(jù)渲染上去，接下來，應(yīng)該是先關(guān)閉登錄框，然后彈出一個提示信息（登錄成功），然后把token和用戶信息userinfo兩個信息一同存到本地儲存中。接下來，渲染出頭像和用戶名即可。
為什么要存token 和 userinfo？
token是每次登錄后生成的一個隨機字符串，用來代表登錄成功的標(biāo)識。
登錄不只是登錄完了就行了，當(dāng)進入我的頁面時，需要判斷是否登錄，如果登錄，那么頭像和用戶名應(yīng)該已經(jīng)顯示了，如果未登錄，顯示的是默認頭像和點擊登錄的樣子，那么如何判斷是否登錄呢？?就是通過本地有沒有token來判斷的，一進入頁面就判斷，那么肯定在created鉤子函數(shù)里面寫了，有token代表登錄，有token就有userinfo，那么取出本地userInfo渲染頭像和名字，沒有就顯示點擊登錄。

代碼實踐：
1. 寫好頁面靜態(tài)布局，點擊頭像彈出登錄框（這里利用vant組件）


2.?登錄框輸入賬號密碼點擊登錄發(fā)起登錄請求
2.1 --- vant登錄組件已經(jīng)寫好了獲取賬號密碼，直接復(fù)制進來就行，但是發(fā)現(xiàn)這個對象的鍵是個中文，那怎么拿到值？
可以用對象中括號取值：



2.2 ---?拿到輸入的賬號密碼后，作為參數(shù)傳給登錄接口

點擊登錄按鈕時，發(fā)起登錄請求，把獲取的賬號密碼作為參數(shù)傳給登錄接口

3.?關(guān)閉登錄框，存入本地
3.1 ---?這里存入本地的時候，如果要存的值是一個對象，就要先把它轉(zhuǎn)成字符串，因為本地儲存只能存字符串


4.?渲染頭像和昵稱


到此，大致效果完成
5.?頁面進入判斷是否登錄?

在created鉤子函數(shù)里面判斷