? ? ? ?這里采用基于Token驗(yàn)證的方式進(jìn)行登錄，開干之前我們先將思路捋一下，前端將用戶登錄的信息通過表單請(qǐng)求后臺(tái)，后端服務(wù)器判斷用戶賬號(hào)密碼正確之后，根據(jù)用查詢結(jié)果、定義好的秘鑰、過期時(shí)間 生成 token ，返回給前端，前端拿到后端返回的 token ,存儲(chǔ)在 localStroage，前端在采用導(dǎo)航守衛(wèi)在每次路由跳轉(zhuǎn)時(shí)判斷 localStroage 有無(wú) token ，沒有則跳轉(zhuǎn)到登錄頁(yè)，有則請(qǐng)求獲取用戶信息或者進(jìn)行轉(zhuǎn)跳，實(shí)現(xiàn)登錄。
預(yù)覽：
Springboot部分
在Meavn中導(dǎo)入對(duì)應(yīng)的jwT依賴
<!-- JWT相關(guān)--
<dependency>? ??
? ? ? <groupId>io.jsonwebtoken</groupId>???
? ? ? ?<artifactId>jjwt</artifactId>????
????????<version>0.7.0</version>
</dependency>
? ? ? 建立一個(gè)Utilis工具類 ，根據(jù)定義Token 過期時(shí)間,密鑰 ,令牌前綴等生成token令牌和token的解析。值得注意的是Jwt里的數(shù)據(jù)是BASE64編碼的，沒有進(jìn)行加密，因此不要放入敏感數(shù)據(jù)。生成的token如下：DDHeyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJEREgiLCJpbWciOiTcxfQ.i37He6dOrv13qagIVdEkV2SgF0NDpgwliCrd8A5OLhI解析的token格式為：{sub=xxx, img=, id=2, name=東云, iat=1624439994, exp=1625044794} 。對(duì)于springboot中JWT的使用可以看Spring Boot中使用token：jwt_超頻化石魚的博客-CSDN博客
Controller層代碼如下：
Service層：
前端部分
前臺(tái)使用element ui 進(jìn)行搭建，通過全局的路由守衛(wèi)實(shí)現(xiàn)登錄。
使用?router.beforeEach?注冊(cè)一個(gè)全局前置守衛(wèi)，守衛(wèi)是異步解析執(zhí)行，resolve 完之前一直處于等待中。next: Function: 一定要調(diào)用該方法來(lái)?resolve?這個(gè)鉤子。執(zhí)行效果依賴?next?方法的調(diào)用參數(shù)。故在next方法中取token，若是沒有token值時(shí)請(qǐng)求其他的路由時(shí)讓頁(yè)面不發(fā)生轉(zhuǎn)跳并為了用戶體驗(yàn)進(jìn)行提升，否則執(zhí)行轉(zhuǎn)跳。全局前置守衛(wèi)官方文檔導(dǎo)航守衛(wèi)| Vue Router (vuejs.org)
前臺(tái)登錄頁(yè)面如下：
登錄邏輯的實(shí)現(xiàn)：
希望路過的大佬不要嫌棄，若有不對(duì)之處還希望指正為謝！@~@
