Нужна реализация oauth 2 для реагирования маршрутизатора

Ответ 1

Я попытаюсь объяснить, что мой высокоуровневый аутентификация выполняется с помощью ретранслятора. Вам понадобится реализация как на сервере, так и на клиенте, и вам нужно принять несколько решений. В этом примере я буду использовать redux для библиотеки потоков.

Сначала вам понадобится механизм для защиты ваших маршрутов, я делаю это с более высоким компонентом порядка:

// 'Components/requireAuthentication'

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import SignIn from './SignIn'

export default (ChildComponent) => {
  class AuthenticatedComponent extends Component {
    static propTypes = {
      hasAuthToken: PropTypes.bool.isRequired
    };

    render () {
      const { hasAuthToken } = this.props
      return (hasAuthToken
        ? <ChildComponent {...this.props} />
        : <SignIn />
      )
    }
  }

  const mapStateToProps = ({session}) => (session)

  return connect(mapStateToProps)(AuthenticatedComponent)
}

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

hasAuthToken prop - это элемент управления здесь, если он истинен, тогда будет отображаться ChildComponent, в противном случае он отобразит SignIn. Обратите внимание, что этот процесс рендеринга SignIn хорош, если вы не заботитесь о SEO, но можете перенаправить пользователя в sign- в пути, если вы заботитесь о том, чтобы поисковые системы индексировали ваши защищенные маршруты.

Наконец AuthenticatedComponent подключается к состоянию хранения session, но его можно легко отключить, чтобы использовать любую другую библиотеку потоков по вашему выбору. Проще говоря, он подписывается на изменения на session. Если значение hasAuthToken изменяется, компонент будет повторно отображен, если он в данный момент установлен.

Теперь для маршрутов:

import { Route } from 'react-router'
import Container from './Components/Container'
import Private from './Components/Private'
import requireAuthentication from './Components/requireAuthentication'

export default (
  <Route path='/' component={Container}>
    <Route path='private' component={requireAuthentication(Private)}>
      <Route path='other' component={...} />
    </Route>
  </Route>
)

Здесь я применяю метод requireAuthentication (по умолчанию экспортированный метод из приведенного выше кода) с компонентом, который я хочу защитить. Это приведет к тому, что страницы не будут отображаться, пока свойство сохранения session.hasAuthToken не будет установлено, а вместо этого отобразит компонент SignIn.

Другие маршруты, вложенные под защищенный компонент, также будут защищены из-за того, как маршрутизатор-ретранслятор создает маршруты.

На высоком уровне компонент SignIn должен просто быть страницей с обычным <a href> (т.е. не реагировать-маршрутизатором Link), чтобы начать рукопожатие Oauth2. Модуль simple-oauth2 содержит несколько хороших примеров того, как реализовать серверную сторону oauth2, поэтому я не буду вдаваться в это здесь. Если вы следуете этим примерам, это конечная точка app.get('/auth', function (req, res) {}), к которой вы хотите привязать пользователя.

В конечной точке callback вам захочется как-то упорствовать token (например, к вашей сессии (express-session поможет здесь) или в базу данных), а затем перенаправить пользователя обратно в ваше приложение-ответ.

Теперь вам нужно получить свою сессию в хранилище на стороне сервера на стороне сервера, готовясь к ее гидратации на клиенте. В документах redux объясняется, как это сделать на странице Server Rendering, в частности Вставить исходный компонент HTML и состояние и разделы "Клиентская сторона" . Как минимум вам понадобится такой объект:

{
  hasAuthToken: (typeof req.session.token !== 'undefined')
}

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

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

Желаем удачи.