如何在整个会话中保留 JWT 令牌直到用户注销？

Posted 2023-03-10

【中文标题】如何在整个会话中保留 JWT 令牌直到用户注销？

【英文标题】：How to persist JWT token throughout session until user logout?

【发布时间】：2017-11-20 09:00:06

【问题描述】：

我正在使用 JWT 为一个简单的 React/Rails Api 进行身份验证，该 API 向 Giphy api 发出请求。

我在成功登录后收到一个令牌，它可以工作，因为我在开发人员工具的网络选项卡的授权标题中有 'Bearer thatlongstringwithnumbersandletters'。但是，当我刷新页面时，我会丢失令牌。

在我的 app.js 文件中：

handleLogin(params)
    // debugger
    console.log('params', params)
    let URL = 'http://localhost:3000/api/v1/auth'
    axios.post(URL, 
      username: params.username,
      password: params.password
    )
    .then(res =>   //console.log('app', res.data)
      const token = res.data.token
      //console.log('Store in localStorage: ', token)
      localStorage.setItem('jwtToken', token)
      setAuthorizationToken(token)
      // this.history.push('/puns')
    )
  

在我的 setAuthorizationToken.js 文件中：

import axios from 'axios'

const setAuthorizationToken = (token) => 
  if(token)
    axios.defaults.headers.common['Authorization'] = `Bearer $token`
   else 
    delete axios.defaults.headers.common['Authorization']
  
  console.log('Authorization is SET')


export default setAuthorizationToken

然后，我认为令牌会在整个用户会话中保持不变的是通过在 index.js（app.js 的父级）中放置回调通过将其放置在父级中，我可以在整个用户会话中保存令牌。

import setAuthorizationToken from './components/auth/setAuthorizationToken'

setAuthorizationToken(localStorage.jwtToken);

ReactDOM.render((
  <Router>
    <App />
  </Router>
), document.getElementById('root'));

我怎样才能让令牌被持久化？任何帮助表示赞赏，谢谢。

【问题讨论】：

将 jwt 添加到会话存储是一个坏主意，它容易受到 XSRF 攻击

【参考方案1】：

您似乎没有正确访问localStorage。

试试这个：

localStorage.getItem('jwtToken')

【讨论】：

如果我删除令牌是一个参数，我会收到类型错误 - App.js:33 Uncaught (in promise) TypeError: Failed to execute 'setItem' on 'Storage': 2 arguments required, but only 1 present.

@user112514 确保您使用的是get 而不是set。

【参考方案2】：

存储在 sessionStorage 中：

sessionStorage.setItem('access_token', access_token);

然后使用令牌：

sessionStorage.getItem('access_token');