Создайте приложение React.js с логином и аутентификацией пользователя.

 import React from 'react'; import { Link } from 'react-router'; import { LoginLink, LogoutLink, Authenticated, NotAuthenticated } from 'react-stormpath'; export default class Header extends React.Component { render() { return ( <nav className="navbar navbar-default navbar-static-top"> <div className="container"> <div id="navbar-collapse" className="collapse navbar-collapse"> <ul className="nav navbar-nav"> <li><Link to="/">Home</Link></li> </ul> <ul className="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> ); } } 

Главная страница

В нашей MasterPage обратите внимание на свойство this.props.children . Он будет содержать компоненты дочерних маршрутов, которые соответствуют нашему маршрутизатору. Так что, если бы у нас был маршрут, который выглядел так:

 <Route path='/' component={MasterPage}> <Route path='/hello' component={HelloPage} /> </Route> 

И мы попытались получить доступ /hello . Массив this.props.children будет заполнен компонентом HelloPage и по этой причине этот компонент будет отображаться на нашей главной странице.

Теперь представьте сценарий, в котором вы пытаетесь получить доступ / . Без этого this.props.children будет отображаться только ваша главная страница, но с пустым содержимым. Это где IndexRoute вступает в игру. С помощью IndexRoute вы можете указать компонент, который должен отображаться при IndexRoute по пути маршрута главной страницы (в нашем случае `/`).

Но прежде чем мы добавим наш IndexRoute к нашему маршрутизатору, давайте создадим новый файл в нашем каталоге pages именем IndexPage.js и добавим в него следующее:

 import { Link } from 'react-router'; import React, { PropTypes } from 'react'; import { LoginLink } from 'react-stormpath'; export default class IndexPage extends React.Component { render() { return ( <div className="container"> <h2 className="text-center">Welcome!</h2> <hr /> <div className="jumbotron"> <p> <strong>To my React application!</strong> </p> <p>Ready to begin? Try these Stormpath features that are included in this example:</p> <ol className="lead"> <li><Link to="/register">Registration</Link></li> <li><LoginLink /></li> <li><Link to="/profile">Custom Profile Data</Link></li> </ol> </div> </div> ); } } 

Теперь давайте добавим наш IndexRoute . Откройте app.js и внутри тега <Route path='/' component={MasterPage}> добавьте свой IndexRoute чтобы он выглядел следующим образом:

 <Route path='/' component={MasterPage}> <IndexRoute component={IndexPage} /> </Route> 

Страница авторизации

Теперь у нас есть приложение React, которое показывает заголовок со страницей по умолчанию. Но у нас еще нет страницы входа. Итак, давайте создадим новый файл с именем `LoginPage.js` и добавим к нему некоторое содержимое:

 import React from 'react'; import DocumentTitle from 'react-document-title'; import { LoginForm } from 'react-stormpath'; export default class LoginPage extends React.Component { render() { return ( <DocumentTitle title={`Login`}> <div className="container"> <div className="row"> <div className="col-xs-12"> <h3>Login</h3> <hr /> </div> </div> <LoginForm /> </div> </DocumentTitle> ); } } 

Обратите внимание на компонент LoginForm . Это все, что мы должны добавить, чтобы у нас была полностью рабочая форма, в которой люди могут зарегистрироваться.

Но прежде чем мы сможем его использовать, нам нужно открыть app.js и добавить маршрут для страницы в нашем маршрутизаторе. Поэтому внутри тега <Route path='/' component={MasterPage}> добавьте следующее:

 <LoginRoute path='/login' component={LoginPage} /> 

Чтобы получить доступ к странице входа, нам нужно добавить это в наше меню. Итак, откройте Header.js и внутри элемента <ul className="nav navbar-nav navbar-right"> добавьте следующее:

 <NotAuthenticated> <li> <LoginLink /> </li> </NotAuthenticated> 

Как видите, мы используем компонент NotAuthenticated . При этом мы будем показывать LoginLink только LoginLink когда пользователь еще не вошел в систему.

Страница регистрации

Теперь давайте добавим страницу, где люди могут зарегистрироваться. Мы назовем это RegistrationPage . Поэтому создайте новый файл с именем RegistrationPage.js и поместите в него следующее содержимое:

 import React from 'react'; import DocumentTitle from 'react-document-title'; import { RegistrationForm } from 'react-stormpath'; export default class RegistrationPage extends React.Component { render() { return ( <DocumentTitle title={`Registration`}> <div className="container"> <div className="row"> <div className="col-xs-12"> <h3>Registration</h3> <hr /> </div> </div> <RegistrationForm /> </div> </DocumentTitle> ); } } 

Обратите внимание, что мы использовали компонент RegistrationForm . Как вы уже догадались, это отразит регистрационную форму Stormpath. И как только вы зарегистрируетесь, пользователи будут открывать страницу входа, где они смогут войти.

Для того, чтобы получить доступ к этой странице. Нам нужно добавить маршрут. Итак, откройте app.js и внутри тега <Route path='/' component={MasterPage}> добавьте:

 <Route path='/register' component={RegistrationPage} /> 

 <NotAuthenticated> <li> <Link to="/register">Create Account</Link> </li> </NotAuthenticated> 

 import React from 'react'; import DocumentTitle from 'react-document-title'; import { UserProfileForm } from 'react-stormpath'; export default class ProfilePage extends React.Component { render() { return ( <DocumentTitle title={`My Profile`}> <div className="container"> <div className="row"> <div className="col-xs-12"> <h3>My Profile</h3> <hr /> </div> </div> <div className="row"> <div className="col-xs-12"> <UserProfileForm /> </div> </div> </div> </DocumentTitle> ); } } 

 app.post('/me', bodyParser.json(), stormpath.loginRequired, function (req, res) { function writeError(message) { res.status(400); res.json({ message: message, status: 400 }); res.end(); } function saveAccount () { req.user.givenName = req.body.givenName; req.user.surname = req.body.surname; req.user.email = req.body.email; req.user.save(function (err) { if (err) { return writeError(err.userMessage || err.message); } res.end(); }); } if (req.body.password) { var application = req.app.get('stormpathApplication'); application.authenticateAccount({ username: req.user.username, password: req.body.existingPassword }, function (err) { if (err) { return writeError('The existing password that you entered was incorrect.'); } req.user.password = req.body.password; saveAccount(); }); } else { saveAccount(); } }); 

 <Authenticated> <li> <Link to="/profile">Profile</Link> </li> </Authenticated> 

 <AuthenticatedRoute path='/profile' component={ProfilePage} /> 

 <Route path='/' component={MasterPage}> ... </Route> 

 <HomeRoute path='/' component={MasterPage}> ... </HomeRoute> 

 <AuthenticatedRoute path='/profile' component={ProfilePage} /> 

 <AuthenticatedRoute> <HomeRoute path='/profile' component={ProfilePage} /> </AuthenticatedRoute> 

 <Authenticated> <li> <LogoutLink /> </li> </Authenticated> 

 class ContextExample extends React.Component { static contextTypes = { authenticated: React.PropTypes.bool, user: React.PropTypes.object }; render() { if (!this.context.authenticated) { return ( <div> You need to <LoginLink />. </div> ); } return ( <div> Welcome {this.context.user.username}! </div> ); } } 

 export MasterPage from './MasterPage' export IndexPage from './IndexPage' export LoginPage from './LoginPage' export RegistrationPage from './RegistrationPage' export ProfilePage from './ProfilePage' 

 import { MasterPage, IndexPage, LoginPage, RegistrationPage, ProfilePage } from './pages'; 

 $ node server.js 

 Listening at http://localhost:3000