Как защитить свои маршруты с контекстом React

Автор оригинала: FreeCodeCamp Community Member.

Полом Кристофе

Среди изменений в Реагировать 16,3 это новая стабильная версия Контекст API Отказ Мы собираемся взглянуть на то, как это работает, создавая Компонент защищенного маршрута Отказ

Что такое контекст?

Контекст о состоянии инкапсуляции. Это позволяет нам передавать данные от компонента родительского поставщика для любого подписанного компонента по дереву. Без государственного управления нам часто приходится «сверлить» реквизиты через каждый компонент по пути.

Разве это не то, что redux для?

Да , Контекст работает аналогично, как компоненты могут подключаться к глобальному состоянию Redux. Тем не менее, нативный элемент, такой как контекст, часто станет лучшим решением для малых и средних приложений, которые не нуждаются в комплексе над головой redux.

Основные понятия

Существует три элемента к контексту:

• CreateContext – Вызов это возвращает пару компонентов, Провайдер и Потребитель Отказ
• Провайдер – компонент, который позволяет одному или нескольким Потребители подписаться на изменения.
• Потребитель – Компонент подписан на провайдер

Давайте начнем строить

Мы собираемся построить приложение с Два маршруты. Один из них Страница посадки с глобальным доступом. Другой – Страница приборной панели с ограниченным доступом для зарегистрированных пользователей. Вы можете найти Окончательная версия здесь Отказ

Заголовок контекста

Чтобы продемонстрировать основные функциональные возможности контекста, давайте начнем с создания компонента заголовка, который позволяет нам войти и выйти. Во-первых, создайте наш контекст в новом файле.

/* AuthContext.js */

import React from 'react';

const AuthContext = React.createContext();

Экспорт компонента AuthProvider Чтобы определить наше состояние (будь то, вошел ли пользователь) и пропустите его состояние в ценность опоры на Провайдер Отказ Мы просто разоблачнем Authconsumer со значимым именем.

/* AuthContext.js */

...

class AuthProvider extends React.Component {  state = { isAuth: false }

  render() {    return (              {this.props.children}          )  }}

const AuthConsumer = AuthContext.Consumer

export { AuthProvider, AuthConsumer }

В index.js, оберните наше приложение в AuthProvider Отказ

/* index.js */import React from 'react';import { render } from 'react-dom';import { AuthProvider } from './AuthContext';import Header from './Header';

const App = () => (  <;div>          
      

render(, document.getElementById('root'));

Теперь создайте наши Заголовок и импортировать наши Authconsumer (Я ухожу из-за ясности).

/* Header.js */import React from 'react'import { AuthConsumer } from './AuthContext'import { Link } from 'react-router-dom'

export default () => (  
          
)

Потребители контекста должны быть функция как их прямой ребенок. Это будет передано ценность от нашего Провайдер Отказ

/* Header.js */...export default () => (  
    

      {({ isAuth }) => (        
          
                          HOME                      

          {isAuth ? (            
                              Dashboard                                            logout                          
          ) : (            login          )}        

      )

Потому что Исаут Установлено значение FALSE, только кнопка входа будет видна. Попробуйте изменить значение для правда (Это переключается на кнопку выхода).

Хорошо, давайте попробуем переключение Исаут в коде. Мы передадим функцию логина и выхода из наших Провайдер Отказ

/* AuthContext.js */...class AuthProvider extends React.Component {  state = { isAuth: false }

  constructor() {    super()    this.login = this.login.bind(this)    this.logout = this.logout.bind(this)  }

  login() {    // setting timeout to mimic an async login    setTimeout(() => this.setState({ isAuth: true }), 1000)  }

  logout() {    this.setState({ isAuth: false })  }

  render() {    return (              {this.props.children}          )  }}

Эти функции позволят нам переключать наше состояние Auth в Заголовок Отказ

/* Header.js */...export default () => (  
          {({ isAuth, login, logout }) => (        
          
                          HOME                      

          {isAuth ? (            
                              Dashboard                                            logout                          
          ) : (            login          )}        

Защищенный маршрут с контекстом

Теперь, когда мы охватывали основы, давайте расширим то, что мы научились создавать защищенный компонент маршрута.

Сначала сделай Посадка и Приборная панель страница компонентов. Наша приборная панель будет видна только тогда, когда пользователь вошел в систему. Обе страницы будут столь же простой, как показано ниже:

/* Dashboard.js */import React from 'react'

const Dashboard = () => 
User Dashboard

export default Dashboard

Теперь давайте направляемся на эти страницы.

/* index.js */import React from 'react';import { render } from 'react-dom';import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';import { AuthProvider } from './AuthContext';import Landing from './Landing';import Dashboard from './Dashboard';import Header from './Header';

const App = () => (  <;div>          ;        
                                                

render(, document.getElementById('root'));

В этом текущем состоянии вы можете перейти к обоим / и /Приборная панель Отказ Мы сделаем специальный компонент маршрута, который проверяет, зарегистрирован ли пользователь под названием ProtectedRoute Отказ Настройка похожа на наше Заголовок составная часть.

/* ProtectedRoute.js */import React from 'react';import { Route, Redirect } from 'react-router-dom';import { AuthConsumer } from './AuthContext';

const ProtectedRoute = () => (      {({ isAuth }) => (

    )}  );

export default ProtectedRoute;

Частный маршрут будет работать так же, как обычный Реагистрационный маршрутизатор Маршрут, поэтому мы выставим компонент, и к нему передано какие-либо другие реквизиты.

const ProtectedRoute = ({ component: Component, ...rest }) => (

Теперь интересная часть: мы будем использовать Исаут Переменная, чтобы определить, следует ли его перенаправить или сделать компонент защищенного маршрута.

const ProtectedRoute = ({ component: Component, ...rest }) => (      {({ isAuth }) => (                  isAuth             ?              :         }        {...rest}      />    )}  )

В нашем индекс Файл давайте импортируем ProtectedRoute И используйте его на нашей приборной панели.

/* index.js */...

Удивительно, теперь мы защищены маршруты! Попробуйте указывать браузер на /Приборная панель и посмотрите, как он отправлялся на страницу посадки.

Опять же, вот ссылка для Рабочая демонстрация Отказ Узнайте больше о контексте от Реаги официальные документы Отказ