Аутентификация в основном компоненте в реакции js

Я хочу создать пользовательское приложение с помощью метеора (v1.3). Следовательно, аутентификация и авторизация являются ядром приложения. Я наткнулся на этот отличный пример, написанный автором потокового маршрутизатора, который объясняет, как выполнять аутентификацию и авторизацию с помощью потокового маршрутизатора.

https://github.com/alanning/meteor-roles/tree/master/examples/flow-router-advanced Однако в этом примере для демонстрации используется Blaze. Я хотел бы знать, возможно ли сделать то же самое с реакцией.

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

Скажем, у меня есть основной компонент макета:

export const MainLayout = ({content}) => (

    <div className="container">

                {content}

    </div>
);

Как я могу выполнить аутентификацию в этом макете? Хотя, я знаю, что могу сделать это в маршрутизаторе, но вся точка потока маршрутизатора является нереактивной и предсказуемой. Автор Flow router также рекомендовал сделать это на слое шаблона, как он сделал в примере выше.

React — это новое для меня, возможно, я неправильно понял концепцию реагирования. Таким образом, если вы, ребята, думаете, что это не идеальный способ сделать это, пожалуйста, направьте меня на правильный путь.


authentication reactjs javascript meteor flow-router
person dev-jim    schedule 17.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы связать реактивные переменные Meteor с компонентами React в Meteor 1.3+, используйте функцию createContainer:

export const MainLayout = createContainer(() => {
  return {
    isAdmin: Roles.userIsInRole(Meteor.userId(), ['admin']),
    userName: Meteor.user() ? Meteor.user().username : null
  }
}, (props) => {
  if (!props.isAdmin) {
    return <p>No cake for you.</p>
  }
  return <div className="container">
    <p>Hello {props.userName}</p>
    {props.content}
  </div>;
});

createContainer расширяет объект props возвращаемым значением предоставленной вами функции обратного вызова. Если вы получите доступ к реактивному значению в этой функции (например, Meteor.user() выше), оно будет переоцениваться при каждом изменении этого значения. Введите Meteor.logout() в консоли браузера и наблюдайте за мгновенной реакцией компонента.

Чтобы получить полноценное руководство, посетите https://www.meteor.com/tutorials/react/collections. .

person aedm    schedule 17.04.2016
comment
Это работает для реактивных переменных. Но что, если я хочу добавить форму входа, если пользователь логин. Как связать событие отправки формы или любое другое действие? - person dev-jim; 18.04.2016
comment
Затем вам нужно создать объект React.Component вместо функции рендеринга без сохранения состояния. Итак, class MyComponent extends React.Component {...}, а затем createContainer(() => {...}, MyComponent); вы можете добавить обработчики событий в этот класс. - person aedm; 19.04.2016
comment
Мне удалось заставить его работать с помощью TrackerReact, я считаю, что TrackerReact проще в использовании. Но ваш ответ тоже работает. Поэтому я принимаю, что это рабочий ответ. Спасибо. - person dev-jim; 20.04.2016