javascript - 如何在整个 session 期间保留 JWT token 直到用户注销？

Question

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

我在成功登录后收到一个 token ，它之所以有效，是因为我在“开发者工具”的“网络”选项卡的授权 header 中有'Bearer thatlongstringwithnumbersandletters'。但是，当我刷新页面时，我丢失了 token 。

在我的 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 的父级)中放置一个回调， token 将在整个用户 session 中持续存在。通过将其放置在父级中，我可以在整个过程中保存 token 。

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

setAuthorizationToken(localStorage.jwtToken);

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

如何让 token 持久化？感谢您提供任何帮助，谢谢。

Answer 1

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

试试这个:

localStorage.getItem('jwtToken')