反應-重定向用戶以登錄（如果未登錄），否則繼續

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')) { “假定用戶未登錄，因此它應嘗試呈現Dashboard組件並失敗。但是它失敗了，它只是將瀏覽器中的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上可用。

閱讀此答案，以更好地闡明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')
);