1. 11 | 登錄前端實現
前端任務點，編寫登錄請求函數，和 用戶注冊 類似，前端拿到用戶名和密碼發起 POST 請求。
收到 token 如何持久化存儲，如何讓每次請求都攜帶 token 是這里的點。
用戶登錄的介面詳情可以點 這里 。
這里有可以優化的點，未來可能需要添加驗證碼等附加信息，這個時候就需要添加函數參數，就會比較麻煩，可以將參數數據格式包裝成一個對象。當然，這里還是使用第一種方法了。
這不是重點，重點是登錄成功後，我們要做的事情。
按照介面約定，登錄成功我們可以得到如下信息：
這里我們要用到 token 欄位，是我們現在有 token 了，但一刷新就沒了，所以我們要做一下持久化存儲，你想存哪裡就存哪裡，只要你能找到。這里就存儲 localStorage 中了，在 Chorme86 中你甚至可以存到一個本地的文本文件中，只不過讀取速度比較慢罷了。
除了 token，我們還要將用戶信息存下來，比如首頁展示用的用戶頭像等信息。
關於本地信息的安全性問題，本地保存的用戶信息並不作為數據請求的憑證，僅供展示使用，當用戶更改本地的用戶信息對於登錄的狀態不會有影響，因為後端的判斷依據是 token，token 有效就登錄成功，而不是說本地存儲的用戶信息是誰服務端就認為你是誰，前端是不可信的。這種登錄方式的危險點在於用戶 token 被盜，但這很難避免，最不安全的是人。。。
登錄成功，返回首頁，用戶名或者是用戶頭像並沒有同步更新，這是因為，這里是單頁應用，你在 login 頁面將登錄用戶信息存到 localStorage 中，然後跳轉到了首頁，此時頁面沒有刷新，而 localStorage 中的信息沒有及時更新到 DOM 中，此時的用戶信息還是你沒有進入 login 頁面的用戶信息，自然是無法展示的，怎麼解決呢？很簡單，刷新一下。
當頁面刷新時，用戶信息會從 localStorage 中讀取，顯示的就是現在的登錄用戶了，但。。。
我不想刷新。
也很簡單，搞成響應式數據就好了呀。來人呀，上Vuex。
當你將 token 存在 cookie 中，前端並不需要主動設置，默認就攜帶傳給了服務端，而這里我們存到 Authorization 中，就需要我們設置一下，攔截請求，在請求發送前添加 token。
好的，來捋一捋流程。
用戶訪問 /login，被前端路由處理，指向Login.vue，用戶看到登錄框，填入自己的賬號，當用戶填寫賬號時，name password被實時監聽，同時會對登錄按鈕的可操作產生影響，只有當用戶將賬密輸入完整時，登錄按鈕可用。
前端收集用戶信息，調用 network 中封裝的 longin 請求函數，該請求發送前被攔截，添加 token，可能為空，使用賬密登錄時，token沒實際效用。
後端檢查成功給響應，前端將響應中數據的 token 通過觸發 mutations 更新 Vuex 中 state，同時，將該 token 存到 localStorage，以免用戶關掉頁面導致 token 丟失。
登錄成功跳到應用首頁，用戶頭像等信息通過 Vuex 獲取，因為 Vuex 中的數據是響應式的，此時從 login 跳轉到首頁，用戶頭像等信息也會得到相應的更新。
當用戶新增文章時，只需向伺服器傳文章數據就可以了，而對於文章作者的相關信息則由後端從請求頭中的 token 解析得到，這里需要注意，前端不要將本地的用戶信息作為准確的作者信息，對於用戶可以偽造的信息要做最小化的信任，用戶完全有能力將本地用戶名從張三改為李四，而最終作者是那個則需要由用戶提供的 token 來判定，雖說 token 也有可能被偽造，但難度相對較大，往往是被竊取的可能性更大。
無密碼登錄其實還是需要「密碼」的，只不過是換了一個臨時性的對人不可讀的字元串來代替罷了，並且每次請求幫你填好了。
在不考慮安全性的情況下本質上其實就是你將密碼存到了瀏覽器里，然後你每次訪問網站時讓瀏覽器幫你輸入用戶名和密碼，這個過程你是無感知的，這樣自己就不用像個憨憨一樣每次刷新就要填一遍表單。
填表是一件非常無聊的事。
要學一波 TypeScript 了呀。
2. SpringBoot+Vue項目中實現登錄驗證碼校驗
在各大項目中，為保證數據的安全性，通常在登錄頁面加入驗證碼校驗，以防止爬蟲帶來的數據泄露危機。本文將介紹在前後端分離的項目中，怎樣實現圖形驗證碼校驗。
第一步：在後端創建一個生成隨機驗證碼的工具類和接收請求驗證碼的介面。工具類的主要作用生成隨機驗證碼和對應的圖片。介面的作用是將生成的隨機驗證碼保存到session，同時，將圖片進行base64編碼，然後返回給前端。
第二步：在登錄頁面創建的同時獲取驗證碼，並將後端傳回來得key和編碼後的字元串拼接，綁定img標簽的src屬性。此外，當用戶點擊驗證碼的img標簽時，重新獲取驗證碼，後端session更新驗證碼。
第三步：後端登錄介面接收登錄請求時，將用戶提交的驗證碼和session中的驗證碼進行比對，不相同則返回相應信息給前端進行提示，相同則進行賬號密碼的匹配。
3. 前端 vue 已登陸用戶怎麼處理
可以嘗試用vuex做狀態管理，當用戶登錄成功之後，將狀態信息存放在相應的本地（如果是web端可以定義一個cookie，設置一下過期時間，如果是移動端，可以嘗試放在localstorage）。登錄之前做阻塞，去做這個狀態信息的檢測，通過就登錄。沒通過就路由到登錄界面
4. Vue項目中用戶登錄及token驗證及流程圖
在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：
簡單舉例說明：
① 調登錄介面成功，在回調函數中將token存儲到localStorage和vuex中（login.vue中）
② store文件夾下的index.js
③ 路由守衛（router文件夾下的index.js）
④ 請求頭加token
⑤ 如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面
流程圖：