Мне было трудно понять, как я могу передать идентификатор сеанса компонентам реакции. Поэтому, в основном, после входа пользователя в систему он должен перенаправить на конечную точку, и на всех страницах, которые я посещаю на этом сайте, идентификатор сеанса должен быть доступен на всех страницах, если он не уничтожен.
Я установил экспресс-сессию:
// setup express session
app.use(session({
secret: 'this is your session',
resave: true,
saveUninitialized: false
}));
// make userId available in templates
app.use(function (req, res, next){
res.locals.currentUser = req.session.userId;
next();
})
А теперь на моем логине:
router.post('/', (req, res) => {
const email = req.body.email;
const password = req.body.password;
if( email && password ){
User.authenticate(email, password, function(err, user){
if(err || !user){
return res.status(404).json({error: true});
} else {
req.session.userId = user._id;
res.redirect(303, '/main');
}
});
}
Код выше будет только в том случае, если в базе данных есть адрес электронной почты и пароль пользователя. Если это правда, тогда он установит идентификатор сеанса. Теперь этот идентификатор сеанса должен быть установлен по страницам:
Теперь на моем маршрутизаторе для главной страницы я проверяю, существует ли существующий идентификатор сеанса:
router.get('/main', (req, res) => {
if(! req.session.userId ){
return res.status(200);
}
User.findById(req.session.userId)
.exec((err, user) => {
if(err){
console.log(err)
res.redirect('/login');
} else {
res.redirect('/main');
}
})
});
Если он не существует, он должен перенаправить на ту же страницу, но если это так, он должен отобразить ту же страницу.
Теперь самое сложное для меня - как я могу сделать идентификатор сеанса доступным для состояния моих компонентов реакции в глобальном масштабе? Я имею в виду, что у меня должна быть глобальная переменная, в которой она хранится, чтобы я мог ссылаться на нее на страницах переднего плана с помощью реакции?
import React, { Component } from 'react';
import axios from 'axios';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
id: req.session.userId,
};
}
componentDidMount() {
axios
.get(`/api/profile/${this.state.id}`)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div>
<h1>{this.state.id}</h1>
</div>
);
}
}
export default UserAgenda;
Я попытался console.log для req.session.userId, и он возвращает неопределенное значение. Мне нужно сделать его активным в моем состоянии, как глобальную переменную, которая доступна для всех страниц, пока я не уничтожу ее. пожалуйста помоги! новичок здесь.