auth组件作为反应中的中间件

Question

如何确保只有登录用户才能访问主页和任务页面？我正在使用redux,我试图避免任何预先制作的auth组件来更好地了解auth.

const App = props => (
    <BrowserRouter>
        <Provider store={store}>
            <div className="app">
                <Layout>
                <Header>
                    <Navbar />
                </Header>
                <Content>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/login' component={Login} />
                    <Route exact path='/signup' component={Signup} />
                    <Route exact path='/task/:id' component={Task} />
                </Content>
                </Layout>
            </div>
        </Provider>
    </BrowserRouter>
)

我正在使用角度和路由中的中间件概念,但在反应中我迷失了.我认为auth与redux的商店无关？当用户在应用程序中导航时,是否需要调用以从api获取用户详细信息？

Answer 1

为了在我们的应用程序中解决这个问题，我们使用了一个更高阶的组件，并使用它包装了我们的根应用程序路由。我们的路线结构有点不同，但对于任何需要“保护”的路线，您可以使用相同的概念。

高阶组件只是“扩展”组件的功能。Redux connect是一个 HOC。在这种情况下，扩展功能将检查身份验证。当组件安装时，您需要检查身份验证，是否检查服务器或本地存储等。构建一个新的组件文件，如下所示：

import React from 'react'

export default function(ComposedComponent) {

  class RequireAuth extends Component {

    state = {
      isAuthenticated: false
    }

    // Push to login route if not authenticated on mount
    componentWillMount() {
      if(!this.state.authenticated) {
        // Use your router to redirect them to login page
      }
    }

    // Push to login route if not authenticated on update
    componentWillUpdate(nextProps) {
      if(!this.state.authenticated) {
        // Use your router to redirect them to login page
      }
    }

    // Otherwise render the original component
    render() {
      return <ComposedComponent {...this.props}/>
    }

  }

  return RequireAuth

}

在你的路由文件中，只需将 HOC 导入为RequireAuth或类似的内容，然后像这样使用：

<Route exact path='/' component={RequireAuth(Home)} />

这或多或少会执行以下操作：当您的路由器命中主路由时，它会RequireAuth在尝试渲染路由组件时运行检查。需要RequireAuth检查您设置的某种身份验证，并将isAuthenticated状态设置为true。如果不正确，它应该重定向到您的登录路径或类似的路径。您还可以connect将此 HOC 进行 redux，以将该isAuthenticated状态而不是组件状态保存到存储中。