javascript - React + Passport.js

Question

TL;DR 我正在制作一个 MERN 应用程序，并希望从 React 访问通行证用户。怎么办？

我正在尝试使用 MERN 堆栈制作一个简单的待办事项应用程序，但无法获取用户身份验证。我在前端使用 React 并带有 Express api 的代理。我想从 React 中获取 req.user 对象，这样我就可以根据用户是否登录来更新导航栏。当我发布到 /api/login 时，我可以从 api 路由记录用户对象。

react 登录表单:

class Login extends Component {
//..
  async login(event) {
    event.preventDefault();
    await api.login({
      username: this.state.username,
      password: this.state.password
    });
    this.setState({
      username: '',
      password: ''
    });
  }
//..
}

Axios:

export async function login({username, password}) {
  axios.post('/api/login', {username, password});
}

服务器:

router.post('/login', passport.authenticate('local'), helpers.login);

exports.login = (req, res) => {
  res.json({ message: 'You have been logged in!' });
};

通过这个 exports.login 函数，我可以 console.log(req.user) 但是当我尝试从任何其他路由访问用户时，它是未定义的。

这就是我想做的:

react :

class App extends Component {
//..
  componentDidMount() {
    this.isLoggedIn();
  }

  componentDidUpdate() {
    this.isLoggedIn();
  }

  async isLoggedIn() {
    const user = await api.isLoggedIn(); 
  }
//..
}

这将发出返回用户对象的请求。

我有点了解代理如何妨碍以及 session 如何工作，但这些部分还没有点击。希望有人能帮助我。

编辑所以嗯...问题就这样消失了。如果再次出现问题，我会更新。

Answer 1

可能重复 here但要查看 @Molda 接受的答案，有一个指向 Github Repository 的链接。这给出了如何处理客户端身份验证的一个很好的例子。您必须更改登录时从服务器返回的用户的某些 token 身份验证。

基本上，您需要将用户存储在客户端的某个位置，例如浏览器本地存储。