Question

您好我正在使用React和Node（express）创建我的应用程序。是时候使用护照建立身份验证了。使用ejs或其他模板语言看起来很容易。使用React组件的最佳方法是什么？

使用护照我们就会得到假{req.user}。我想使用react dom服务器将该布尔值发送到组件，并将其传递给像props这样的对象，以及支持状态并传递给状态对象的transofrm。

你怎么看待它？安全吗？然后我们可以使用如下条件：

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

我不知道如何以不同的方式做到这一点。谢谢你的帮助。

Answer 1

我不是反应专家，但我会说你正在做的是正确的，因为反应提供了组件和容器之间的通信是通过使用道具和状态。

我们通过您的方式获得的额外里程是用户注销后我们可以简单地调用护照注销并将登录状态更改为false，反应将管理更改ui。

this.setState（{登录：假}）;

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 });
}

一起反应护照

3 个答案: