Потеря токена JWT после обновления браузера

Question

Я учусь Разработка полного стека с использованием Spring Boot 2.0 и React .Аутентификация и авторизация управляются JWT, и приложение работает, как и ожидалось, за исключением того, что я должен повторно войти в систему после обновления браузера.Как сохранить токен JWT даже после обновления браузера?

import React, { Component } from 'react';
    import TextField from '@material-ui/core/TextField';
    import Button from '@material-ui/core/Button';
    import Snackbar from '@material-ui/core/Snackbar';
    import Carlist from './Carlist';
    import {SERVER_URL} from '../constants.js';

    class Login extends Component {
      constructor(props) {
        super(props);
        this.state = {username: '', password: '', isAuthenticated: false, open: false};
      }

      logout = () => {
        sessionStorage.removeItem("jwt");
        this.setState({isAuthenticated: false});
    }

      login = () => {
        const user = {username: this.state.username, password: this.state.password};
        fetch(SERVER_URL + 'login', {
          method: 'POST',
          body: JSON.stringify(user)
        })
        .then(res => {
          const jwtToken = res.headers.get('Authorization');
          if (jwtToken !== null) {
            sessionStorage.setItem("jwt", jwtToken);
            this.setState({isAuthenticated: true});
          }
          else {
            this.setState({open: true});  // maintient snackbar ouvert
          }
        })
        .catch(err => console.error(err))
      }

      handleChange = (event) => {
        this.setState({[event.target.name] : event.target.value});
      }

      handleClose = (event) => {
        this.setState({ open: false });
      }

      render() {
        if (this.state.isAuthenticated === true) {
          return (<Carlist />)
        }
        else {
          return (
            <div>
              <br/>
              <TextField tpye="text" name="username" placeholder="Username"
              onChange={this.handleChange} /><br/>
              <TextField type="password" name="password" placeholder="Password"
              onChange={this.handleChange} /><br /><br/>
              <Button variant="raised" color="primary" onClick={this.login}>Login</Button>
              <Snackbar
              open={this.state.open}  onClose={this.handleClose}
              autoHideDuration={1500} message='Check your username and password' />
            </div>
          );
        }
      }
    }

    export default Login;

Answer 1

Я думаю, вы просто не проверяете токен в локальном хранилище вашего конструктора.Когда вы перезагрузите страницу, ваш конструктор выполнит и установит isAuthenticated = false, независимо от того, есть ли токен в локальном хранилище или нет.Вы должны добавить дополнительную логику для проверки токена в локальном хранилище, прежде чем, наконец, установить isAuthenticated.Вероятно, лучшим местом для размещения этого кода была бы функция componentDidMount().Я имею в виду установить его изначально в false и затем обновить в componentDidMount() в соответствии с текущим статусом авторизации.Посмотрите на мой GitHub , у меня есть небольшой шаблонный проект с такой настройкой потока аутентификации.Надеюсь, это поможет, счастливого кодирования!

Answer 2

Я бы использовал локальное хранилище вместо хранилища сессий, как это

localStorage.setItem("jwt", jwtToken)

вместо строки

sessionStorage.setItem("jwt", jwtToken);

Проверьте локальное хранилище в консоли разработчика, обновите страницу ипосмотрим, все ли еще там.Это может потребовать некоторых других изменений в вашем потоке аутентификации, чтобы построить его из localStorage вместо sessionStorage;однако это решит непосредственную проблему потери jwt при обновлении страницы.