元芳怎么了
2022-06-09 16:16:42
我有反應節點快遞應用程序。在客戶端,我正在使用這樣的 react-router:export default function App() { return ( <div className="App"> <Router> <MenuBar/> <Switch> <Route exact path="/" component={Main}/> <Route path="/signin" component={SignIn}/> <Route path="/signup" component={SignUp}/> <Route path="/search" component={Search}/> <Route path="/post" component={Post}/> </Switch> </Router> </div> );}在服務器端,我有使用本地和谷歌策略的護照。成功登錄后,當客戶端從 axios 調用服務器時,我看到 req.user 存在于服務器端,所以我猜這是檢查用戶是否登錄的一種方法。我的問題是,如果我希望我的反應應用程序根據用戶的登錄狀態具有不同的行為,例如,注銷按鈕而不是登錄用戶的登錄按鈕,并且“/post” URL 僅適用于登錄用戶(重定向如果用戶未登錄,則為“/”),如何在客戶端存儲用戶登錄狀態?據我了解,在刷新頁面時將這些數據存儲在 Context 或 Redux 中會出現問題,因為刷新后數據會消失,對吧?我必須使用useEffect((//axios call to check auth state)=>,[])在路由器的每個組件中并根據服務器的響應更新本地狀態?有沒有更好的辦法?
2 回答
大話西游666
TA貢獻1817條經驗 獲得超14個贊
localStorage 是執行此類操作的最佳方式,如果不使用令牌,則必須使用令牌來維護會話。當任何 API 被命中時,每頁一個,使用后端的會話令牌進行檢查。將身份驗證狀態值保存在 localStorage 中將使用戶可以訪問其他沒有登錄的頁面。
蝴蝶不菲
TA貢獻1810條經驗 獲得超4個贊
由于這是一個復雜的問題,無法編寫完整的解決方案。這是指導方針
登錄時,將憑據保存在 localStorage 中,例如 accessToken、刷新令牌
編寫通用代碼(身份驗證服務)以在 localStorage 中寫入和讀取訪問令牌和用戶信息,以便您可以訪問應用程序中的任何位置
ProtecteRoute像本文中給出 的那樣編寫您的自定義https://tylermcginnis.com/react-router-protected-routes-authentication/注銷時,使用并重定向或更改狀態從 localStorage 清除您的數據,
Auth.logout()這樣 ProtectedRouter 將不允許用戶進入受保護的應用程序頁面,因為您的憑據已被刪除Auth.isLoggedIn()并將返回 false。
添加回答
舉報
0/150
提交
取消
