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为您提供的开发服务器运行应用程序正常。我可以从任何URL重新加载页面，例如'/'或'/ profile'等，并且令牌仍然可用。只有当我退出时才会删除令牌。当我运行npm build来创建生产就绪的单个js文件时，我会在我的html文件中引用该问题。从不是'/'的任何其他URL重新加载浏览器会抛出“没有提供令牌”的错误（这是我希望在没有令牌附加到请求时抛出的节点服务器的自定义错误消息）。这意味着当我重新加载页面时，浏览器会删除此标记。如何在生成js文件中持久保存此标记，与dev服务器的方式相同？

Answer 1

您可能错误地使用localStorage。实际上，要在localStorage上设置密钥，您可以执行以下操作：

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

然后，恢复它：

localStorage.getItem('jwtToken')

如果您想要保留数据，即使浏览器关闭，

Localstorage也是正确的选项。否则，如果您希望数据丢失，则应使用SessionStorage API。

祝你好运。

如何在部署react app后在页面重新加载时保持jsonwebtoken

1 个答案: