我正在学习Full Stack Development with Spring Boot 2.0 and 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;
答案 0 :(得分:1)
我认为您根本不检查构造函数中本地存储中的令牌。重新加载页面时,无论本地存储中是否存在令牌,构造函数都会执行并设置isAuthenticated = false
。在最终设置isAuthenticated
之前,您应该添加其他逻辑以检查本地存储中的令牌。放置此代码的最佳位置可能是componentDidMount()
函数。我的意思是将其最初设置为false,然后根据当前授权状态在componentDidMount()
中进行更新。看看我的GitHub,我有一个具有此类验证流设置的小样板项目。希望这对您有所帮助,编码愉快!
答案 1 :(得分:0)
我会使用本地存储来代替会话存储
localStorage.setItem("jwt", jwtToken)
代替行
sessionStorage.setItem("jwt", jwtToken);
在开发人员控制台中检查本地存储,刷新页面并查看它是否仍然存在。可能需要对您的身份验证流程进行其他一些更改,才能从localStorage而不是sessionStorage进行构建。但是,这将解决直接的问题,即页面刷新时丢失jwt。