Question

我正在使用以下堆栈：

反应
React router v4
PassportJS
带有Express和的NodeJS后端快递会议

我已成功设置基于PassportJS的登录和注册身份验证。我的应用程序中的所有页面都是受保护的路由 - 它们只能由登录用户查看。

所以，我的问题是，对于每条路线，我如何检查用户当前是否登录。我知道快速会话提供服务器端会话管理，但我想知道是否有办法避免在每个页面加载时向后端发出API请求以验证当前用户的会话是否存在。

我的App.js文件：

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import AsyncAuthPage from 'components/AsyncAuthPage/index.js'

const NoMatch = () => (
  <p>Path not found</p>
);

const HomePage = () => (
  <div>WELCOME!</div>
);


class App extends Component {
  render() {
    return (
      <div className="App ">
      <BrowserRouter>
        <Switch>
          <Route path="/login" component = {AsyncAuthPage} />
          <Route path="/home" component = {HomePage} />
          <Route path="*" component={NoMatch} />        
        </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

AsyncAuthPage组件实现了基于PassportJS的身份验证。在上面的示例中，我想通过身份验证来保护主页路由。如何才能做到这一点？用户成功登录后，需要注意以下事项：

父App.js需要知道登录成功
所有页面都应尽量避免对后端进行API调用（on componentDidMount或page load）尽可能验证当前用户是否已登录。
应该在页面上重新加载

Answer 1

在成功登录后将凭据存储在localStorage中，在您的州/ redux的应用启动时加载凭据，如果从您的API收到错误401（未经授权），必要时使凭据无效。

使用React和PassportJS进行身份验证的路由

1 个答案: