部署反应应用程序后如何在页面重新加载时保留 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”语句中添加了代码，如下所示（也在上面的代码 sn-p 中），以确保即使重新加载页面，本地存储仍然保留此令牌：

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

从create-react-app 为您提供的开发服务器运行应用程序可以正常工作。我可以从任何 URL 重新加载页面，例如“/”或“/profile”等，并且令牌仍然可用。只有当我注销时，令牌才会被删除。 当我运行 npm build 创建一个生产就绪的单个 js 文件时出现问题，然后我在我的 html 文件中引用该文件。从不是“/”的任何其他 url 重新加载浏览器会引发“未提供令牌”的错误（这是来自我的节点服务器的自定义错误消息，当请求没有附加令牌时我想抛出该错误消息）。这仅仅意味着当我重新加载页面时浏览器会删除这个令牌。如何以与开发服务器相同的方式将此令牌持久保存在生产 js 文件中？

Answer 1

您可能错误地使用了 localStorage。 实际上，要在 localStorage 上设置密钥，您可以：

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

然后，恢复它：

localStorage.getItem('jwtToken')

如果您想在浏览器关闭的情况下保留数据，则本地存储是正确的选择。 否则，如果您希望数据丢失，则应使用 SessionStorage API。

祝你好运。