部署React應用后如何在頁面重載時持久保存jsonwebtoken

Question

我的應用程序的索引頁面中有以下代碼：

import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import Router from './routes'
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './rootReducer'
import setAuthorizationToken from './utils/setAuthorizationToken'
import {setCurrentUser} from './actions/loginActions'
import jwt from 'jsonwebtoken'

const store = createStore(rootReducer, compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f))


if (localStorage.jwtToken) {
    setAuthorizationToken(localStorage.jwtToken)
    store.dispatch(setCurrentUser(jwt.decode(localStorage.jwtToken)))
}


ReactDOM.render(
    <Provider store={store}>
        <Router/>
    </Provider>, document.getElementById('root'))

其基本思想是使用令牌作為認證服務器上客戶端請求的一種形式。 這樣，來自客戶端的每個請求都必須在標頭中具有令牌，服務器將對該令牌進行解碼和認證。 我遵循的一個教程在“ if”語句中添加了代碼，如下所示（也在上面的代碼段中），以確保即使重新加載頁面時，localstorage仍然保留此令牌：

  if (localStorage.jwtToken) {
    setAuthorizationToken(localStorage.jwtToken)
    store.dispatch(setCurrentUser(jwt.decode(localStorage.jwtToken)))
}

從create-react-app提供的開發服務器上運行應用create-react-app可以正常工作。 我可以從任何URL（例如“ /”或“ / profile”等）重新加載頁面，令牌仍然可用。 僅當我注銷后，令牌才會被刪除。 當我運行npm build來創建可用於生產的單個js文件時，就會出現問題，然后在html文件中進行引用。 從任何其他非'/'的URL重新加載瀏覽器會引發“未提供令牌”的錯誤（這是我的節點服務器發出的自定義錯誤消息，當沒有令牌附加到請求時，我會拋出該錯誤消息）。 這僅表示瀏覽器在我重新加載頁面時刪除了該令牌。 如何以與開發服務器相同的方式將該令牌保留在生產js文件中？

Answer 1

您可能使用了錯誤的localStorage。 實際上，要在localStorage上設置密鑰，您可以執行以下操作：

localStorage.setItem('jwtToken', 'my-token-here')

然后，要恢復它：

localStorage.getItem('jwtToken')

如果即使瀏覽器關閉也要保留數據，則Localstorage是正確的選項。 否則，如果您希望數據丟失，則應使用SessionStorage API。

祝好運。