时间戳

首页 > 解决方案 > React 中受保护的路由

reactjs - React 中受保护的路由

问题描述

我正在尝试使用 Create React App 2 和 React Router 4 在 React 中创建一些受保护的路由。我以 Tyler McGinnis 的Protected Routes文章为例。这是我的基本应用程序组件。

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { loggedIn: false };
  }

  componentDidMount() {
    console.log('did mount');
    this.setState({ loggedIn: true });
  }

  render() {
    fakeAuth.authenticate(this.state.loggedIn);
    console.log('render');

    return (
      <Router>
        <Fragment>
          <Login />
          <PrivateRoute path="/register" component={Register} />
          <Chordsheets />
          <Chordsheet />
        </Fragment>
      </Router>
    );
  }
}

export default App;

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

const fakeAuth = {
  isAuthenticated: false,
  authenticate(state) {
    this.isAuthenticated = state;
    console.log('isAuthenticated', this.isAuthenticated);
  }
};

const Login = () => (
  <div>
    <Route exact path="/" component={LoginForm} />
  </div>
);

const Chordsheets = () => (
  <Fragment>
    <Route path="/chordsheets" component={Header} />
    <Route path="/chordsheets" component={AllChordSheets} />
  </Fragment>
);

const Chordsheet = () => (
  <Fragment>
    <Route path="/chordsheet/:id" component={Header} />
    <Route path="/chordsheet/:id" component={ChordSheet} />
  </Fragment>
);

const Header = () => {
  return (
    <header>
      <nav className="links">
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/chordsheets/0">My Chordsheets</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};

组件安装后loggedIn设置为true。去新路线时不会再次调用渲染，所以我无法到达Register路线。

有人对如何构建它有任何想法吗？谢谢！

标签： reactjsrouting

解决方案

我知道我迟到了，但我很乐意通过查看这个protected-react-routes-generator来帮助任何他想要这个功能的人

您要做的就是将路线作为数组提供。

推荐阅读