Блог

я создал приложение react (простая CMS) с несколькими компонентами, большинство компонентов доступны для посетителей, в основном (App.js ) компонент. я использую react router для отображения компонентов, я сделал компонент панели мониторинга доступным только для администраторов, через example.com/dashboard . я создал систему входа с помощью node.js и JWT я выполнил всю логику. но я не знаю правильного способа показать, скрыть компонент панели мониторинга. я пытался использовать, но я не могу понять логику, пожалуйста, покажите мне, какая лучшая стратегия для отображения, скрытия панели мониторинга в приложении react. безопасно ли использовать, если еще логика показывает / скрывает панель мониторинга. или это небезопасно использовать? Мой вопрос: есть ли способ react выполнить эту работу

пример:

 my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
     |components/
      |Clien/
        |Home.js
        |Home.css
        |Header.js
        |Footer.js
        |Login.js
      |admin/
        |Dashboard.js
        |Dashboard.css
      App.css
      App.js
      index.css
      index.js
      logo.svg
  

Вам нужно отслеживать, входит ли ваш пользователь в систему через какое-либо глобальное состояние или localStorage . Затем вы можете сделать что-то вроде этого:

 <Route render={(props) => (
    state.isAuthenticated === true
        ? <Component {...props} />
        : <Redirect to='/login' />
)} />
  

Имейте в виду, что злонамеренное использование может просто открыть devtools и изменить isAuthenticated на true , поэтому любой контент, который вы предоставляете на панели мониторинга, также должен быть защищен аутентификацией.