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

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

高阶组件只是“扩展”组件的功能。终极版的 connect是HOC。在这种情况下，扩展功能将检查身份验证。当组件安装时，您需要检查身份验证，无论是检查服务器还是localStorage等。构建一个新的组件文件，如下所示：

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来减少将isAuthenticated状态保存到商店而不是组件状态。

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

1 个答案: