首頁(yè) 猿問(wèn) 前端如何驗(yàn)證token的合法性來(lái)判...

前端如何驗(yàn)證token的合法性來(lái)判斷用戶是否登錄？

JavaScript

蕪湖不蕪 2018-12-22 17:10:59

1、我使用了JWT的方式，后端生成了一個(gè)token，將其返回給前端，前端獲取到后每次請(qǐng)求接口都附帶上這個(gè)token，后端來(lái)判斷這個(gè)token是否合法，如果不合法，后端該如何讓其重定向到登錄頁(yè)面？是前端根據(jù)后端返回的錯(cuò)誤信息讓前端重定向嗎？2、使用react-router之類的前端路由，我在切換路由的時(shí)候怎么判斷用戶是否已經(jīng)登錄了呢？畢竟有的頁(yè)面不能讓未登錄的用戶訪問(wèn)，如果沒(méi)有登錄，就在前端將其重定向到登錄頁(yè)面。這個(gè)是要在每次切換前端路由的時(shí)候向后端發(fā)送一個(gè)請(qǐng)求來(lái)驗(yàn)證嗎？如果驗(yàn)證通過(guò)了才將頁(yè)面切換過(guò)去。3、或者還有沒(méi)有什么更好也更安全的保持登錄狀態(tài)的方法呢？

查看完整描述

1 回答

慕桂英4014372

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊

正在用laravel jwt和vue寫項(xiàng)目在，說(shuō)下我的想法：

首先，前后端一定要有個(gè)約定，即返回的數(shù)據(jù)格式及如何處理錯(cuò)誤。比如我們返回的json的數(shù)據(jù)格式（高級(jí)點(diǎn)還有http status響應(yīng)機(jī)制）

{

"code": 0, // 0代表成功，1失敗，2未登錄....

"msg": "修改成功！"

"data":[]

}

前端每次請(qǐng)求路由之前做個(gè)響應(yīng)（vue對(duì)應(yīng)的是router.beforeEach方法，這里我不太了解react,但是你查下肯定有這個(gè)方法），先判斷本地是否有存儲(chǔ)用戶的登錄信息，無(wú)則直接返回登錄頁(yè)面（or其它業(yè)務(wù)頁(yè)面），有則進(jìn)行你的其它操作，這里已經(jīng)回答第二個(gè)問(wèn)題了,至于你說(shuō)的部分頁(yè)面才需要用戶登錄，也很簡(jiǎn)單，只需要對(duì)路由進(jìn)行分組處理

登錄之后，將后端返回的信息包裝存儲(chǔ)本地，比如token及用戶信息，以備下次調(diào)用

這里回到你的第一個(gè)問(wèn)題，當(dāng)用戶請(qǐng)求通過(guò)路由前的判斷，也就是前端認(rèn)為用戶已登錄用token去請(qǐng)求后端api的時(shí)候，后端返回token過(guò)期或者錯(cuò)誤的時(shí)候怎么處理？這個(gè)時(shí)候返回的數(shù)據(jù)code=2，那么我們只需要在統(tǒng)一請(qǐng)求后端api接口的地方做個(gè)響應(yīng)，當(dāng)code=2,清空本地存儲(chǔ)的用戶數(shù)據(jù)，前端路由到登錄頁(yè)即可，這里不該后端去重定向了

第三個(gè)問(wèn)題不好回答，安全是相對(duì)的，這個(gè)方式已經(jīng)很安全了。設(shè)計(jì)的符合用戶習(xí)慣，業(yè)務(wù)邏輯無(wú)問(wèn)題就是我的目標(biāo)

你的標(biāo)題貌似有問(wèn)題，token的合法性是后端去判斷的，應(yīng)該問(wèn)前端如何根據(jù)后端對(duì)token驗(yàn)證的結(jié)果做出響應(yīng)

反對(duì) 回復(fù) 2019-01-21