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)但是當我嘗試從任何其他途徑訪問用戶這是不確定的。

這是我想做的：

反應：

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

  componentDidUpdate() {
    this.isLoggedIn();
  }

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

它將發出一個返回用戶對象的請求。

我有點理解代理可能會遇到的麻煩以及會話的工作方式，但是片段尚未被點擊。 希望有人可以幫助我。

編輯那么...問題就解決了。 如果有什么再次出現問題，我會更新。

Answer 1

這里可能重復，但是要查看@Molda接受的答案，有一個指向Github存儲庫的鏈接，該鏈接提供了一個很好的示例，說明了如何在客戶端上處理身份驗證。 登錄時，您必須將某些令牌身份驗證更改為從服務器返回的用戶。

基本上，您需要將用戶存儲在客戶端的某個位置，例如瀏覽器的本地存儲。