javascript - 關於前後分離頁面登入攔截問題

Question

專案是前後分離，後端只給前端接口，每一個接口帶token，現在有一些需要登入才能進去的頁面，前端如何攔截。例如:由A頁面 透過A標籤跳到 B頁面(B頁面需要登入才能進去)。我現在做法是進到B頁面，發送ajax請求，後台返回狀態才做跳到登入頁面，現在問題是我已經轉到B頁面才做判斷很不合理。

Answer 1

可以考慮點選a標籤的時候先發ajax請求再決定往哪裡跳轉？

Answer 2

可以自己封裝一個ajax請求,單獨判斷登入狀態,未登入跳轉登入,登入直接回傳資料

Answer 3

寫一個公共的js 在裡面寫頁面載入函數 你需要登入授權才能存取的頁面就引用 然後在裡面寫邏輯判斷

Answer 4

前端不做攔截，伺服器端做攔截。前端攔截的話，只能在B頁面做，你考慮一下拼字url進入呢？ B頁訪問介面嘗試拿userinfo，拿到就是登陸了，沒拿到就沒登入。

Answer 5

token一般都有過期時間，用localstorage保存token的時候帶上一個過期時間，頁面跳轉的時候先判斷token
是否過期，過期了就跳登錄頁，沒有就繼續。
如果是單頁的應用這個就很好解決，如果不是單頁的話，就寫到一個公共js裡。

Answer 6

肯定會由使用者某個互動動作導致跳到第二個頁面的， 再跳轉之前進行登入驗證， 沒有登入就讓其登入（或註冊）， 登入（註冊）肯定要封裝起來的， 封裝的時候預留登入後的成功回呼與註冊成功後的回調， 在回呼函數中再做跳到B頁面

Answer 7

這種兩種方法解決：
1、服務端做驗證既然是要登入才能進去的頁面必然會涉及到用戶權限在B頁面發的ajax請求中有token 後端做token過期的驗證判斷是否有權限報錯統一回前端寫一個公共方法驗證沒有權限的錯誤訊息（這種方式要做到回應的介面上比較保險）
2、前端在每個頁面寫個看門狗js，判斷儲存使用者資訊中的過期時間在做跳轉。

我看樓主的需求是想在點擊的時候做判斷是否跳轉 可以把a標籤換成點擊函數 在函數中判斷 使用window.location.href = url 的方式跳轉頁

Answer 8

lz前端框架用的什麼?
我知道vue_router中有鉤子函數可以實現, 在router.beforeEach的時候判斷是否登入,如果沒有登入就去登入,如果登入就直接next()