Question

我正在使用JWT进行身份验证，以获取向Giphy api发出请求的简单React / Rails Api。

我在成功登录后收到一个令牌，它之所以有效，是因为我在开发者工具网络标签的授权标题中有＆＃39; Bearerslongstringwithnumbersandletters＆＃39; 。但是，当我刷新页面时，我丢失了令牌。

在我的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的父级）通过将其置于父级中，我可以在整个过程中保存令牌。 / p>

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

setAuthorizationToken(localStorage.jwtToken);

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

如何才能保留令牌？感谢任何帮助，谢谢。

Answer 1

您似乎没有正确访问<!DOCTYPE html> <html> <body> <form id="form" onsubmit="myFunction()"> Enter name: <input type="text" name="fname"> <input type="submit" id="submit" value="Submit"> </form> <div id="first_div" style="visibility:hidden">Second</div> <script> // using JQuery $(document).ready(function(){ $("#submit").click(function(e){ e.preventDefault(); $("#form").submit(); $("#form").hide(); alert("Your form was successfully submitted"); }); }); </script> </body> </html>。

请改为尝试：

localStorage

Answer 2

存储在sessionStorage中：

sessionStorage.setItem('access_token', access_token);

然后使用令牌：

sessionStorage.getItem('access_token');

如何在整个会话期间持久保存JWT令牌，直到用户注销？

2 个答案: