Question

我有一个简单的应用程序：

const App = () => (
  <div className="App">
    <Router>
      <NavBar />
      <RenderRoutes />
    </Router>
  </div>
);

路由配置作为单独的对象：

import { Home } from '../Components/Home';
import { Login } from '../Components/Login';
import { Test } from '../Components/Test';

export const routes = [
  {
    path: '/',
    key: 'root',
    component: Home,
    exact: true,
  },
   
  {
    path: '/test',
    key: 'test',
    component: Test,
    exact: true,
  },

  {
    path: '/login',
    key: 'login',
    component: Login,
    exact: true,
  },
]

RenderRoutes（路由从路由配置文件导入）：

export const RenderRoutes = () => {  
  return (
    <Switch>      
        {routes.map((route) => {          
          return <PrivateRoute key={route.key} {...route}  />
        })}
        <Route component={Error404} />
    </Switch>
  )
}

我的 PrivateRoute 组件如下所示：

export const PrivateRoute = ({ children, ...rest }) => {
  const isAuthenticated = false;
  return (
    <Route {...rest} render={() => {
      return isAuthenticated === true
        ? children
        : <Redirect to='/login' />
    }} />
  )
}

但是private route不管isAuthenticated === true还是false，一直渲染children，为什么呢？

Answer 1

您已将 isAuthenticated 定义为 PrivateRoute 组件中的常量变量，值为 false，因此它必须始终呈现子级。

您的 isAuthenticated 值应该可以从 props 或 context 或 redux store 中获得 - 无论您在哪里存储身份验证状态。

export const PrivateRoute = ({ children,isAuthenticated, ...rest }) => {
  return (
    <Route {...rest} render={() => {
      return isAuthenticated === true
        ? children
        : <Redirect to='/login' />
    }} />
  )
}

另请注意，如果您的 isAuthenticated 值是异步填充的，那么您还应该有一个加载状态来说明计算延迟，否则即使身份验证请求成功，您也会被重定向到登录。

私有路由不会重定向到登录页面

1 个答案: