使用 react-router-dom 的受保护页面不起作用答案

【问题标题】：Protected page using react-router-dom doesn't work使用 react-router-dom 的受保护页面不起作用
【发布时间】：2020-04-18 17:24:48
【问题描述】：

我正在尝试实现仅登录的用户仪表板页面。

App.js

<BrowserRouter history={hist}>
  <Route path="/sign-in" exact component={SignIn} />
  <PrivateRoute path="/dashboard">
    <Dashboard />
  </PrivateRoute>
</BrowserRouter>

PrivateRoute.js

export function PrivateRoute({children, ...props}) {
  return (
    <Route {...props} render={( {location} ) =>
      isAuthenticated ? children : <Redirect to="/sign-in" />
    }
    />
  );
}

const isAuthenticated = () => {
  const userToken = JSON.parse(sessionStorage.getItem("user-token"));
  return userToken ? true : false'
}

我正在检查 sessionStorage 中的用户令牌，如果它为 null，则返回 false 或 true。事件虽然返回“false”，但它重定向到仪表板，而不是登录页面。我的问题是什么？

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

即使没有经过身份验证的用户，路由器也会重定向到仪表板的原因是isAuthenticated 是一个函数。此后，您需要调用此函数：

export function PrivateRoute({children, ...props}) {
  return (
    <Route {...props} render={( {location} ) =>
      isAuthenticated() ? children : <Redirect to="/sign-in" />
    }
    />
  );
}

const isAuthenticated = () => {
  const userToken = JSON.parse(sessionStorage.getItem("user-token"));
  return userToken ? true : false'
}

如果不想每次路由变化都调用函数，可以实现一个立即调用的函数：

const isAuthenticated = (() => {
  const userToken = JSON.parse(sessionStorage.getItem("user-token"));
  return userToken ? true : false'
})()

export function PrivateRoute({children, ...props}) {
  return (
    <Route {...props} render={( {location} ) =>
      isAuthenticated ? children : <Redirect to="/sign-in" />
    }
    />
  );
}

【讨论】：

【解决方案2】：

在 PrivateRoute.js 中执行此操作..

<Route {...props} render={( {location} ) =>
  isAuthenticated() ? children : <Redirect to="/sign-in" />
}
/>

原因是您没有调用isAuthenticated。如果问题仍然存在，请随时讨论。

【讨论】：