javascript - 關于前后分離頁面登錄攔截問題

問題描述

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

問題解答

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

可以自己封裝一個ajax請求,單獨判斷登錄狀態,未登錄跳轉登錄,登錄直接返回數據

寫一個公共的js 在里面寫頁面加載函數 你需要登錄授權才能訪問的頁面就引用 然后在里面寫邏輯判斷

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

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

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

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

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

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