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

Question

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

成功登录后，我会收到一个令牌，它之所以有效，是因为开发人员工具的"网络"选项卡的授权标头中有"长字符串带有数字和字母的持有者"。但是，当我刷新页面时，我丢失了令牌。

在我的应用程序中.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

然后，我认为令牌将在整个用户会话中持久化是通过在索引中放置回调.js(app.js的父级(通过将其放在父级中，我可以在整个过程中保存令牌。

import setAuthorizationToken from './components/auth/setAuthorizationToken'
setAuthorizationToken(localStorage.jwtToken);
ReactDOM.render((
  <Router>
    <App />
  </Router>
), document.getElementById('root'));

如何使令牌持久化？任何帮助不胜感激，谢谢。

Answer 1

看起来您没有正确访问localStorage。

试试这个：

localStorage.getItem('jwtToken')

Answer 2

存储在会话存储中：

sessionStorage.setItem('access_token', access_token);

然后使用令牌：

sessionStorage.getItem('access_token');