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

 componentWillMount() { this.onSuccess = this.onSuccess.bind(this); this.onError = this.onError.bind(this); } onSuccess(tokens) { this.props.auth.handleAuthentication(tokens); this.setState({ redirectToReferrer: true }); } onError(err) { console.log('error logging in', err); } 

Вы заметите, что ваш компонент передает обработку аутентификации обратно компоненту более высокого порядка. Это яркий пример преимуществ компонентов и композиции более высокого порядка в JavaScript.

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

 render({location, auth}, {redirectToReferrer}) { let from; if (location && location.state) { from = location.state; } else { from = { pathname: '/' }; } if (auth.isAuthenticated() || redirectToReferrer) { return <Redirect to={from} />; } return ( <OktaSignInWidget widget={auth.widget} onSuccess={this.onSuccess} onError={this.onError} /> ); } 

Здесь вы заметите, что Preact немного отличается тем, что он дает вам дескрипторы для props и state качестве параметров функции render . Этот код просто использует деструктуризацию этих параметров, чтобы упростить использование location , auth и redirectToReferrer не имея тонны this.props.{whatever} .

Итак, ваш окончательный файл /src/routes/login/index.js будет выглядеть так:

 import { h, Component } from 'preact'; import Redirect from '../../lib/Redirect'; import OktaSignInWidget from '../../lib/OktaSignInWidget'; import { withAuth } from '../../lib/auth'; export default withAuth(class Login extends Component { state = { redirectToReferrer: false }; componentWillMount() { this.onSuccess = this.onSuccess.bind(this); this.onError = this.onError.bind(this); } onSuccess(tokens) { this.props.auth.handleAuthentication(tokens); this.setState({ redirectToReferrer: true }); } onError(err) { console.log('error logging in', err); } render({location, auth}, {redirectToReferrer}) { let from; if (location && location.state) { from = location.state; } else { from = { pathname: '/' }; } if (auth.isAuthenticated() || redirectToReferrer) { return <Redirect to={from} />; } return ( <OktaSignInWidget widget={auth.widget} onSuccess={this.onSuccess} onError={this.onError} /> ); } }) 

Обновить страницу профиля

Теперь, когда у вас есть компонент Login и он использует виджет входа Okta, используйте созданный вами компонент auth и обновите страницу профиля (в /src/routes/profile/index.js ), чтобы дать вам больше информации о пользователь. Вот как должен выглядеть ваш окончательный файл /src/routes/profile/index.js :

 import { h, Component } from 'preact'; import { route } from 'preact-router'; import { withAuth } from '../../lib/auth'; import style from './style'; export default withAuth(class Profile extends Component { constructor(props){ super(props); } componentWillMount(){ if(this.props.auth.isAuthenticated()){ this.state = { user: this.props.auth.getCurrentUser() }; }else{ return route('/login/'); } } render(props, { user }) { return ( user ? <div class={style.profile}> <h3 class={style.heading}>Profile</h3> <ul> <li> <span class={style.key}>Name:</span> <span class={style.value}>{user.claims.name}</span> </li> <li> <span class={style.key}>Email:</span> <span class={style.value}>{user.claims.email}</span> </li> </ul> </div> : null ); } }) 

Вы добавили защиту аутентификации на уровне Component в функцию componentWillMount компонента. Если пользователь аутентифицирован, он вызывает функцию getCurrentUser для компонента более высокого порядка и добавляет пользователя в состояние компонента. В функции render вы просто выводите имя пользователя и адрес электронной почты.

Обновите компонент заголовка

Теперь вам просто нужно получить маршруты в ваше приложение и получить меню для ссылки на них. Начните с изменения файла /src/components/header/index.js на:

 import { h, Component } from 'preact'; import { Link } from 'preact-router/match'; import { withAuth } from '../../lib/auth'; import style from './style'; export default withAuth(class Header extends Component { componentWillMount(){ if(this.props.auth.isAuthenticated()){ this.setState({ user: this.props.auth.getCurrentUser() }); } } render(props, {user}) { return ( <header class={style.header}> <h1>Preact App</h1> <nav> <Link activeClassName={style.active} href="/">Home</Link> {user ? <Link activeClassName={style.active} href="/profile">Profile</Link> : null } {user ? <Link activeClassName={style.active} onClick={props.auth.logout.bind(null, props.history)} href="javascript:;">Logout</Link> : <Link activeClassName={style.active} onClick={props.auth.login.bind(null, props.history)} href="javascript:;">Login</Link>} </nav> </header> ); } }) 

Будет показана кнопка «Вход», если пользователь не вошел в систему, и кнопка «Выход», если они есть. Он также покажет пункт меню «Профиль» только тем пользователям, которые вошли в систему.

Измени свой маршрут

Наконец, измените маршруты в файле /src/components/app.js чтобы ваше приложение /src/components/app.js о ваших новых маршрутах и ​​о том, как их обрабатывать. Итак, ваш новый файл app.js будет выглядеть так:

 import { h, Component } from 'preact'; import { Router } from 'preact-router'; import Header from './header'; import Home from '../routes/home'; import Profile from '../routes/profile'; import Login from '../routes/Login'; // import Home from 'async!./home'; // import Profile from 'async!./profile'; export default class App extends Component { /** Gets fired when the route changes. * @param {Object} event "change" event from [preact-router](http://git.io/preact-router) * @param {string} event.url The newly routed URL */ handleRoute = e => { this.currentUrl = e.url; }; render() { return ( <div id="app"> <Header /> <Router onChange={this.handleRoute}> <Home path="/" /> <Profile path="/profile/" /> <Login path="/login/" /> </Router> </div> ); } } 

Все, что действительно изменилось, это то, что вы импортировали недавно созданный компонент Login, удалили пользовательское свойство, передаваемое в компонент Profile, и добавили новый маршрут для компонента Login.

Запустите ваше новое приложение Preact!

Теперь вы сможете сохранить свою работу и запустить npm start в корневой папке и увидеть полнофункциональное приложение Preact с аутентификацией пользователя через Okta!

Есть много общего между Preact и React, но есть некоторые ключевые различия. Preact предназначен для приложений, в которых размер загрузки невелик. В маршрутизаторе Preact есть несколько удобных функций, но некоторые вещи отсутствуют (например, с помощью withRouter ). Есть также некоторые удобные удобства, такие как передача props и state в функцию render . В целом, я думаю, что Preact аккуратен, но я мог видеть, что действительно нужен полноценный React для сложных приложений.

Учить больше

Вы можете узнать больше о Preact на их веб-сайте, а Preact-Router — в репозитории Github .

Вы также можете получить полный код этой статьи из репозитория Okta Developer Github .

Как всегда, если у вас есть какие-либо вопросы, комментарии или сомнения по поводу статьи, кода, Preact или Okta, не стесняйтесь обращаться ко мне по электронной почте или ударить меня в комментариях или через Twitter @leebrandt .