Создание частного маршрута, когда isAuth исходит от обратного вызова

Я использую систему частной маршрутизации реактивного маршрутизатора. Я проверяю аутентификацию, получая jwt из localstorage и перекрестную проверку на сервере в обещание Axios.

Однако частная маршрутизация, похоже, не ждет возврата обратного вызова. Я неправильно выполняю аутентификацию? или есть способ исправить это?

мои аксиомы обещают проверить авторизацию.

const checkAuth = (cb) => {
    let token = localStorage.getItem("jwtToken");
    // console.info(token);
    if (token) {
        axios.defaults.headers.common["Authorization"] = token;
        axios
            .get("api/admin/auth/profile")
            .then(res => {
                localStorage.setItem("admin", res.data.admin);
                cb(null, res.data);
            })
            .catch(err => {
                showErr(err, cb);
            });
    } else {
        cb("Not authenticated", null);
    }
}

Установлен частный маршрут.

const PrivateRoute = ({ component: Component, ...rest, checkAuth }) => 
(
    <Route {...rest} render = {(props) => (
        checkAuth((isAuthenticated) => (
            isAuthenticated === true
            ? <Component {...props} />
            : <Redirect to = {{
              pathname: '/login',
              state: { from: props.location }
            }} />
        ))
    )} />
)
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
476
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Метод checkAuth ничего не возвращает. Функция рендеринга должна возвращать компонент. Я бы предложил создать такой компонент CheckAuth с отслеживанием состояния.

class CheckAuth extends React.Component {
  state = {}

  componentDidMount () {
    this.props.checkAuth(isAuthenticated => {
      this.setState({isAuthenticated})
    })
  }

  render () {
     return this.props.children({loading, isAuthenticated})
  }
}

const PrivateRoute = ({ component: Component, ...rest, checkAuth }) => 
(
    <Route {...rest} render = {(props) => 
      <CheckAuth {...props} checkAuth = {checkAuth}>
       {({isAuthenticated}) => (
         isAuthenticated === true
         ? <Component {...props} />
         : <Redirect to = {{
           pathname: '/login',
           state: { from: props.location }
        )}
      </CheckAuth>
    )}</Route>

} 

Другие вопросы по теме