Question

我正在寻找一种使用react-router-4进行某种路由保护的方法。通过查看文档中的示例，他们创建了一个呈现如下的组件：

<PrivateRoute path="/protected" component={Protected} />
and the privateRoute component:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

我真的不明白为什么我应该将“受保护的”组件作为属性传递，然后又不得不照顾散布所有... props和... rest的问题。

在阅读本文档（和其他示例）之前，我创建了以下代码，该代码将路由嵌套在另一个组件中，该组件负责身份验证部分。

因为我的示例（似乎运行得很好）看起来更简单了，所以我一定缺少一些东西。

这种方法是否有缺点？


import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import Nav from './Nav';

// dummy
const Auth = {
  isAuthenticated: () => { return true; }
}

const Home = () => <h1>Home</h1>
const SignIn = () => <h1>SignIn</h1>
const About = () => <h1>About</h1>
class PrivateOne extends Component {
  render() {
    console.log(this.props);
    return <h1>Private</h1>
  }
}
const PrivateTwo = () => <h1>PrivateTwo</h1>
const PrivateThree = () => <h1>PrivateThree</h1>
const NotFound = () => <h1>404</h1>

const Private = ({isAuthenticated, children}) => {
  return(
    isAuthenticated ? (
      <div>
        <h1>Private</h1>
        {children}
      </div>
    ) : (
      <Redirect to={{
        pathname: '/sign_in',
      }}/>
    )
  )
}

const App = () =>
  <div>
    <Router>
      <div>
        <Nav />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/sign_in" component={SignIn} />
          <Private isAuthenticated={Auth.isAuthenticated()}> {/* or some state later on */}
            <Route path="/private1" component={PrivateOne} />
            <Route path="/private2" component={PrivateTwo} />
            <Route path="/private3" component={PrivateThree} />
          </Private>
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  </div>

export default App;

需要身份验证的路由以另一种方式进行处理（PrivateRoutes）

0 个答案: