Фон : на бэкэнде express я использую express -сессию для назначения пользовательских сеансов. В интерфейсе React у меня есть функциональность, предотвращающая вход пользователей в защищенные маршруты. Однако есть один неприятный крайний случай: если аутентифицированный пользователь остается в приложении достаточно долго, чтобы срок действия его повара ie истек, тогда он будет иметь возможность бесплатно посещать все аутентифицированные маршруты как "призрачный" aka нет cook ie и неточное состояние: this.state.isAuthenticated = true ( Да, это состояние технически "аутентифицировано", потому что они никогда не выходили из системы и не перемонтировали компонент, мешающий мне получить свой бэкэнд и выполнить проверку, вот почему я называю их «призраками» )
Почему это так? Что ж, каждый раз, когда мой компонент приложения монтируется, я проверяю, проверяю ли я состояние пользователь. Если они пройдут эту фазу аутентификации, то мой бэкэнд предоставит им сеанс, и я установлю для аутентифицированного состояния значение true. Поскольку компонент моего приложения никогда не перемонтируется, так как пользователь проходит через мое приложение, он сможет посещать неавторизованные маршруты как «призрак».
Предостережение : Если они произойдут при обновлении sh в любой момент или нажмите кнопку выхода из системы, тогда мой компонент перемонтирует и удалит их доступ, поскольку они не являются законными пользователями.
Надеюсь, я хорошо изложил свою ситуацию. Мой вопрос: как я могу удалить пользователя, если он готовит ie истекает?
Редактировать : у меня есть рабочее решение в Protectedroute. js, но checkAuth () вызывается бесконечное количество раз, если пользователь не уходит со страницы. Я хочу избежать Redux, потому что я только что начал React неделю a go
ProtectedRoute. js
function ProtectedRoute({component: Component}, {...rest}) {
return(
<userContext.Consumer>
{({isAuthenticated, checkAuth}) => {
checkAuth()
return <Route {...rest} render = {(props) => isAuthenticated ? (<Component {...props}/>) : (<Redirect to ='/login' />)} />
}}
</userContext.Consumer>
)
}
Приложение. js
class App extends Component {
constructor(props, context) {
super(props, context)
this.state = {
isAuthenticated: false,
isLoading: true
}
this.handleLoggedIn = this.handleLoggedIn.bind(this)
this.handleLoggedOut = this.handleLoggedOut.bind(this)
this.isAuthenticated = this.isAuthenticated.bind(this)
}
componentDidMount() {
//Get and set currently logged in user
//console.log('--componentDidMount--')
this.isAuthenticated()
}
isAuthenticated() {
const url = 'http://localhost:9000/api/auth'
fetch(url, {
method: 'GET',
credentials: 'include',
headers: {
'Content-Type' : 'application/json'
}
})
.then((response) => response.text())
.then((data) => {
//console.log(data)
if (data === 'true') {
console.log('--isAuthenticated--')
this.setState({
isAuthenticated: true,
isLoading: false
})
} else {
this.setState({
isAuthenticated: false,
isLoading: false
})
}
})
.catch((err) => {
console.log('Error', err)
})
}
handleLoggedIn() {
console.log('--handleLoggedIn--')
this.setState({
isAuthenticated: true
})
}
handleLoggedOut() {
this.setState({
isAuthenticated: false
})
}
render() {
const value = {
loggedIn: this.handleLoggedIn,
loggedOut: this.handleLoggedOut,
isAuthenticated: this.state.isAuthenticated,
checkAuth: this.isAuthenticated
}
if (this.state.isLoading) {
return(<div>LOADING</div>)
} else {
return (
<Router>
<userContext.Provider value = {value}>
<div>
<userContext.Consumer>
{(value) => (<Navigation isAuthenticated = {this.state.isAuthenticated} />)}
</userContext.Consumer>
</div>
<Switch>
<Route path = '/signup'>
<Signup />
</Route>
<Route path = '/login'>
<Login handleLoggedIn={this.handleLoggedIn}/>
</Route>
<Route path = '/feed'>
<Feed />
</Route>
<Protectedroute path = '/create-post' component={CreatePost} />
</Switch>
</userContext.Provider>
</Router>
)
}
}
}