Question

开始组件App呈现Wellcome组件，进一步呈现Login组件。

这些是从Router出发的路线：

   <Route exact path={"/welcome"} component={App} />
   <Route exact path={"/"} component={Dashboard} />

在Dashboard组件中，我进行了以下检查：

componentWillMount() {
    if (!sessionStorage.getItem('token_object')) {
        this.props.history.push('/welcome');
    }
}

render() {
    return (
        <div className="wrapper">
            <Sidebar />
            <div id="content">
                <Navbar />
                <Footer />
            </div>
        </div>
    );
}

当我在地址栏中点击http://localhost:myPort/时，它应该尝试呈现仪表板组件并失败，因为“ if (!sessionStorage.getItem('token_object')) {”假定用户未登录。但是失败了，它只是设置了URL在浏览器中浏览到http://localhost:myPort/welcome，但继续呈现Dashboard组件并失败。怎么了？

Answer 1

还有其他一些方法可以进行这些检查，例如“高阶组件”或其他技巧。但是让我们关注上面的示例并将其重构为

render() {
    const isLogged = !!sessionStorage.getItem('token_object'));

    if (!isLogged) {
        return (
            <Redirect to="/welcome" />
        )
    }
    return (
        <div className="wrapper">
            <Sidebar />
            <div id="content">
                <Navbar />
                <Footer />
            </div>
        </div>
    );
}

注释：

!!用于获取是否设置了令牌的布尔值
如果未登录用户，则从redux-router-dom返回Redirect组件

Answer 2

这里您只需在此处更新浏览器的地址栏，而无需使用React-router的逻辑以所需的方式呈现组件。

您可以使用react-router的<Redirect />组件来实现您的目标。

这里是一个可能的解决方案，假设Dashboard组件安装在Router组件内部：

render() {
    if (!sessionStorage.getItem('token_object')) {
        return <Redirect to={'/welcome'} />;
    }
    return (
        <div className="wrapper">
            <Sidebar />
            <div id="content">
                <Navbar />
                <Footer />
            </div>
        </div>
    );
}

Answer 3

始终尝试记录sessionStorage的值，甚至是window.sessionStorage。

请记住，通常sessionStorage将在componentDidMount上可用。

阅读this answer，以更好地阐明sessionStorage的工作原理。

请记住，sessionStorage在服务器端渲染中不可用。

Answer 4

您必须使用条件渲染。

请参见reactjs.org的示例：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

反应-重定向用户以登录（如果未登录），否则继续

4 个答案: