Auth Protected Routes React Router V4 - 传递道具

Rob*_*Rob 5 reactjs react-router

我已经使用 create-react-app 使用 Flux 作为架构创建了一个 reactJS 应用程序,我希望某些路由无需经过身份验证即可访问,而某些路由只能在经过身份验证时访问。使用通量设计模式,我使用 props 将 store 的状态向下传递到每个组件,以便 store 状态可用于所有需要它的子组件。

我已经研究了此处的文档(示例也粘贴在下面)以尝试了解如何在我的应用程序中实现上述结果。

我看不出如何修改示例以将状态向下传递到受保护路由中调用的组件,而无需使用显式名称(如组件传递方式)执行此操作。我想实现...

  1. 将组件传递给 PrivateRoute,以便在我的用户通过身份验证时调用它。
  2. 将父组件中的所有 props 传递给 PrivateRoute 调用的组件(这是为了让我能够通过 props 向下级联商店状态,如果用户已登录,还可以检查商店状态)。

我想我可能在这里误解了一些基本的东西。任何人都可以请指教吗?

  import React from "react";
  import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";

////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time

const AuthExample = () => (
  <Router>
    <div>
      <AuthButton />
      <ul>
        <li>
          <Link to="/public">Public Page</Link>
        </li>
        <li>
          <Link to="/protected">Protected Page</Link>
        </li>
      </ul>
      <Route path="/public" component={Public} />
      <Route path="/login" component={Login} />
      <PrivateRoute path="/protected" component={Protected} />
    </div>
  </Router>
);

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true;
    setTimeout(cb, 100); // fake async
  },
  signout(cb) {
    this.isAuthenticated = false;
    setTimeout(cb, 100);
  }
};

const AuthButton = withRouter(
  ({ history }) =>
    fakeAuth.isAuthenticated ? (
      <p>
        Welcome!{" "}
        <button
          onClick={() => {
            fakeAuth.signout(() => history.push("/"));
          }}
        >
          Sign out
        </button>
      </p>
    ) : (
      <p>You are not logged in.</p>
    )
);

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

const Public = () => <h3>Public</h3>;
const Protected = () => <h3>Protected</h3>;

class Login extends React.Component {
  state = {
    redirectToReferrer: false
  };

  login = () => {
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true });
    });
  };

  render() {
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    const { redirectToReferrer } = this.state;

    if (redirectToReferrer) {
      return <Redirect to={from} />;
    }

    return (
      <div>
        <p>You must log in to view the page at {from.pathname}</p>
        <button onClick={this.login}>Log in</button>
      </div>
    );
  }
}

export default AuthExample;
Run Code Online (Sandbox Code Playgroud)

这是我的实际代码中的一部分...

class Page extends React.Component{
  // constructor(props) {
  //   super(props);
  //   }

  render(){
    return(
    <Router>
      <div>
        <Route exact path="/" render={()=><HomePage {...this.props}/>}/>
        <Route path="/login" render={()=><LoginPage {...this.props}/>}/>
        <PrivateRoute exact path="/protected" component={Main} extra="Boo!"/>
      </div>
    </Router>);
  }
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      (console.log(this.props.extra) || 1) ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);
Run Code Online (Sandbox Code Playgroud)

this.props.extra 是未定义的。

Tom*_*zyk 6

如果您正在寻找一种将额外道具传递给PrivateRoute您的方法,您可以这样做:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={ (props) =>
      ( console.log(props.extra) || 1) ? (
        <Component {...props} {...rest} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);
Run Code Online (Sandbox Code Playgroud)

然后

<PrivateRoute exact path="/protected" component={Main} extra="Boo!"/>
Run Code Online (Sandbox Code Playgroud)

并且Main现在应该收到extraprop(连同pathexact)。