您好，我正在使用 React 和 Node (express) 创建我的应用程序。现在是使用护照建立身份验证的时候了。使用 ejs 或其他模板语言看起来很容易。使用 React 组件的最佳方式是什么？
例如，使用护照我们得到了假 {req.user} 的真假。我想使用 react dom 服务器将该布尔值发送到组件，并将其传递给 props 之类的对象，然后将 props 转换为 state 并传递给 state 对象。
你怎么看？安全吗？ 然后我们可以使用如下条件：
{this.state.signup ? this.welcome() : this.signupButton()}
我不知道该怎么做。感谢您的帮助。
【问题讨论】：
标签： node.js express reactjs passport.js
我不是反应专家，但我会说你所做的是正确的，因为反应提供组件和容器之间的通信是通过使用道具和状态。
我们得到的额外好处是，一旦用户注销，我们可以简单地调用护照注销并将登录状态更改为 false，react 将管理更改 ui。
this.setState({login:false});
【讨论】：
你所做的是正确的。但请确保您修改了全局组件（或）主组件中的状态。
关于 redux 状态的主要内容是，它会在每次浏览器刷新时重置。所以在全局语句中做一个条件案例并改变状态。
我建议你使用 react with redux。与 redux 一起使用时，所有状态都是全局状态。您不必担心状态变化。
例如（基于令牌的身份验证）：
获得令牌后，我将其保存在浏览器本地存储中。
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
【讨论】：
这是使用本地护照的设置，这就是我在我的应用程序中设置的方式。
// 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 });
}
【讨论】：