亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 React 和 Express 應用程序中存儲身份驗證狀態

如何在 React 和 Express 應用程序中存儲身份驗證狀態

元芳怎么了 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 中將使用戶可以訪問其他沒有登錄的頁面。



查看完整回答
反對 回復 2022-06-09
?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

由于這是一個復雜的問題,無法編寫完整的解決方案。這是指導方針

  1. 登錄時,將憑據保存在 localStorage 中,例如 accessToken、刷新令牌

  2. 編寫通用代碼(身份驗證服務)以在 localStorage 中寫入和讀取訪問令牌和用戶信息,以便您可以訪問應用程序中的任何位置

  3. ProtecteRoute像本文中給出 的那樣編寫您的自定義https://tylermcginnis.com/react-router-protected-routes-authentication/

  4. 注銷時,使用并重定向或更改狀態從 localStorage 清除您的數據,Auth.logout()這樣 ProtectedRouter 將不允許用戶進入受保護的應用程序頁面,因為您的憑據已被刪除Auth.isLoggedIn()并將返回 false。


查看完整回答
反對 回復 2022-06-09
  • 2 回答
  • 0 關注
  • 220 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號