https://medium.com/strapi/protected-routes-and-authentication-with-react...

Защищенные маршруты и аутентификация с помощью React и Node.js

этом руководстве мы быстро реализуем базовый поток аутентификации с использованием веб-токенов JSON , которые Strapi , а также (что может быть более интересным) как использовать поставщиков аутентификации (Facebook, GitHub, Google…) со Strapi для аутентификации ваших пользователей .

Примечание: исходный код этой статьи доступен на GitHub .

Создание проекта

Прежде всего, вам нужно создать Strapi API:

npm install strapi@alpha -g
strapi new my-app
cd my-app && strapi start
npm install create-react-app -g
create-react-app good-old-react-authentication-flow

Вам нужно зарегистрировать своего первого пользователя , и тогда вы готовы к работе!

Интерфейсная архитектура приложения

Я большой поклонник архитектуры React Boilerplate , поэтому я создал что-то похожее для организации своего кода:

/src
└─── containers // React components associated with a Route
|    └─── App // The entry point of the application
|    └─── AuthPage // Component handling all the auth views
|    └─── ConnectPage // Handles the auth with a custom provider
|    └─── HomePage // Can be accessed only if the user is logged in
|    └─── NotFoundPage // 404 Component
|    └─── PrivateRoute // HoC
|
└─── components // Dummy components
|
└─── utils
     └─── auth
     └─── request // Request helper using fetch

Настройка роутера и PrivateRoute

Чтобы реализовать представления аутентификации, нам сначала нужно создать HoC : компонент высшего порядка , который будет проверять, может ли пользователь получить доступ к определенному URL-адресу.
Для этого нам просто нужно следовать официальной документации и изменить fakeAuthпример и используйте наш auth.jsпомощник:

import React from 'react';  
import { Redirect, Route } from 'react-router-dom';

// Utils
import auth from '../../utils/auth';

const PrivateRoute = ({ component: Component, ...rest }) => (  
  <Route {...rest} render={props => (
    auth.getToken() !== null ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: 'auth/login',
        state: { from: props.location }
        }}
      />
    ):
  )} />
);

Создадим маршрутизацию:

import React, { Component } from 'react';  
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

// Components
import AuthPage from '../../containers/AuthPage';  
import ConnectPage from '../../containers/ConnectPage';  
import HomePage from '../../containers/HomePage';  
import NotFoundPage from '../../containers/NotFoundPage';

// This component ios HoC that prevents the user from accessing a route if he's not logged in
import PrivateRoute from '../../containers/PrivateRoute';

// Design
import './styles.css';

class App extends Component {  
  render() {
    return (
      <Router>
        <div className="App">
          <Switch>
            {/* A user can't go to the HomePage if is not authenticated */}
            <PrivateRoute path="/" component={HomePage} exact />
            <Route path="/auth/:authType/:id?" component={AuthPage} />
            <Route exact path="/connect/:provider" component={ConnectPage} />
            <Route path="" component={NotFoundPage} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Создание представлений аутентификации

Теперь, когда все наши маршруты реализованы, нам нужно создать наши представления.
То, как мы объявили наши маршруты, позволяет нам иметь один компонент, отвечающий за создание правильной формы в соответствии с location.

Прежде всего, давайте создадим forms.jsonфайл, который будет обрабатывать создание формы в каждом представлении авторизации:

• Забыли пароль
• авторизоваться
• регистр
• Сброс пароля

Эта структура JSONбудет выглядеть следующим образом ( вы можете увидеть customBootstrapClassключ, который нужен в Inputкомпонент ):

{
  "views": {    
    "login": [
      {
        "customBootstrapClass": "col-md-12",
        "label": "Username",
        "name": "identifier",
        "type": "text",
        "placeholder": "johndoe@gmail.com"
      },
      {
        "customBootstrapClass": "col-md-12",
        "label": "Password",
        "name": "password",
        "type": "password"
      },
      {
        "customBootstrapClass": "col-md-6",
        "label": "Remember me",
        "name": "rememberMe",
        "type": "checkbox"
      }
    ]
  },
  "data": {
    "login": {
      "identifier": "",
      "password": "",
      "rememberMe": false
    }
  }
}

Настройка состояния при изменении местоположения

Чтобы установить форму, когда пользователь переходит из auth/loginк auth/registerнам нужно использовать следующие жизненные циклы:

componentDidMount() {  
  // Generate the form with a function to avoid code duplication
  // in other lifecycles
  this.generateForm(this.props);
}componentWillReceiveProps(nextProps) {  
  // Since we use the same container for all the auth views we need to update
  // the UI on location change
  if (nextProps.location.match.params.authType !== this.props.location.match.params.authType) {
    this.generateForm(nextProps);
  }
}

В generateFormМетод отвечает за получение данных из forms.jsonфайл выше.

Создание представления

Чтобы создать форму, нам просто нужно сопоставить извлеченные данные в forms.jsonфайл.

handleChange = ({ target }) => this.setState({ value: { ...this.state.value, [target.name]: target.value } });

render() {  
  const inputs = get(forms, ['views', this.props.match.params.authType, []);

  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        {inputs.map((input, key) => (
          <Input
            autoFocus={key === 0}
            key={input.name}
            name={input.name}
            onChange={this.handleChange}
            type={input.type}
            value={get(this.state.value, [input.name], '')}
          />
        ))}
        <Button type="submit" />
      </form>
    </div>
  );
}

Что ж, на этом этапе должны быть созданы все представления, необходимые для аутентификации ваших пользователей! Нам просто нужно сделать вызов API для доступа к приложению.

Отправка данных в API

Чтобы сделать вызов API, у меня есть requestпомощник ( который вы можете получить в демонстрационном приложении ), поэтому нам просто нужно использовать его в нашем handleSubmitфункция:

handleSubmit = (e) => {  
  e.preventDefault();
  const body = this.state.value;
  const requestURL = 'http://localhost:1337/auth/local';

  request(requestURL, { method: 'POST', body: this.state.value})
    .then((response) => {
      auth.setToken(response.jwt, body.rememberMe);
      auth.setUserInfo(response.user, body.rememberMe);
      this.redirectUser();
    }).catch((err) => {
      console.log(err);
    });
}

redirectUser = () => {  
  this.props.history.push('/');
}

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

Что ж, мы только что выполнили самую сложную часть, потому что использовать собственный провайдер, такой как Facebook, очень просто!

http://uc.org.ru/node/218 # продолжение ...