Обратный паспорт вместе

Question

Привет Я создаю свое приложение, используя React and Node (express). Пришло время создать аутентификацию с использованием паспорта. Использование ejs или другого языка шаблонов выглядело очень просто. Каков наилучший способ использования компонентов React?

Используя паспорт, мы, например, вернемся к false {req.user}. Я хотел бы отправить этот логический элемент в компонент, используя реактивный dom-сервер, и передать его объекту, подобному реквизитам, и перевести его в состояние и передать объект состояния.

Что вы думаете об этом? Безопасно ли это? Тогда мы можем использовать условие как:

{this.state.signup ? this.welcome() : this.signupButton()} 

Я не знаю, как это сделать по-другому. Спасибо за помощь.

Answer 1

Я не эксперт в области реакции, но я бы сказал, что вы делаете правильно, так как реакция обеспечивает связь между компонентом и контейнером, используя реквизит и состояние.

Дополнительная миля, которую мы получаем по вашему пути, - это когда пользователь выйдет из системы, мы можем просто вызвать выход из паспорта и изменить состояние входа в ложь, отреагировать будет управлять сменой ui.

this.setState ({login: false});

Answer 2

Что вы делаете правильно. Но убедитесь, что вы изменяете состояние в глобальном компоненте (или) Основном компоненте.

Главное, что касается состояния redux, оно сбрасывается каждый раз, когда браузер обновляется. поэтому сделайте условный случай в глобальном выражении и измените состояние.

Я рекомендую вам использовать реакцию с redux. при использовании с redux все состояние является глобальным. вам не нужно беспокоиться о государственных изменениях.

, например (маркер аутентификации на основе):

Когда я получить маркер, я сохранить его в своем браузере LocalStorage.

localStorage.setItem('token', response.data.token); 

поэтому я должен проверить токен от глобального компонента.

const token = localStorage.getItem('token'); 
if (token) { //redux style 
    store.dispatch({ type: AUTH_USER }); //dispatch is setState() in react & type is something like what action you are creating. 
} //do this in your main component before you render DOM 

если вы не используете Redux, вы можете использовать что-то вроде этого

const token = localStorage.getItem('token'); 
if (token) { //redux style 
     this.setState({ /*auth: true*/ }); 
} //do this in your main component before you render DOM 

Answer 3

Вот настройки, используя паспорт местного, это как у меня есть это установка в моем приложении.

// server route 
app.post('/api/signin', passport.authenticate('local', { session: 
true, failureRedirect: '/login' }), Authentication.signin); 

//Authentication.signin 
exports.signin = function(req, res, next) { 
//user has already had their email and password authed 
// we just need to give them a token 
res.send({ token: tokenForUser(req.user) }); 
}; 

// Generates token for user uses jwt-simple node module 
function tokenForUser(user) { 
const timestamp = new Date().getTime(); 
return jwt.encode({ sub: user, iat: timestamp }, config.secret); 
} 

//then on front end in App.js 
const token = localStorage.getItem('token'); 
if (token) { 
store.dispatch({ type: types.AUTH_USER }); 
}