meteor
流星+反応+反応ループ

Android Angular 2 AngularJS Cordova HTML JavaScript jQuery MongoDB Node.js React
サーチ…


前書き

このドキュメントでは、MeteorとReactでReactRouterを使用する方法を説明します。ゼロから、役割と認証を含む作業アプリまで。

私は例を挙げて各ステップを示します

1-プロジェクトを作成する

2- React + ReactRouterを追加する

3 - アカウントを追加

4-ロールパッケージの追加

プロジェクトを作成する

1-まず、 https://www.meteor.com/installをインストールします。

2 - プロジェクトを作成します。 （ --bareは空のプロジェクトを作成することです）

meteor create --bare MyAwesomeProject

3-最小限のファイル構造を作成する（中間ディレクトリを作成する-p ）。

cd MyAwesomeProject

mkdir -p client server imports/api imports/ui/{components,layouts,pages} imports/startup/{client,server}

4 - 次に、client / main.htmlにHTMLファイルを作成します。 

<head>
   <meta charset="utf-8">
   <title>My Awesome Meteor_React_ReactRouter_Roles App</title>
</head>
 
<body>
  Welcome to my Meteor_React_ReactRouter_Roles app
</body>

5-動作していることを確認します（3000がデフォルトのポートなので、実際には '-p 3000'をスキップできます）。

meteor run -p 3000

'localhost：3000'でブラウザを開く

注意：

  • 物事を短くするために、作成する必要がある他のファイルを飛ばしています。具体的には、 クライアント 、 imports / startup / {client、server}およびserverディレクトリにindex.jsファイルを作成する必要があります 。

  • 完全な例はhttps://github.com/rafa-lft/Meteor_React_Baseで見ることができます 。タグStep1_CreateProjectを探します。

React + ReactRouterを追加

必要に応じて、プロジェクトディレクトリに移動しますcd MyAwesomeProject

1-反応と反応ルータを追加する

meteor npm install --save [email protected] [email protected] [email protected]

2 - クライアント/ main.htmlを編集し、内容を置き換えます： 

 <body>
    <div id="react-root"></div>
 </body>

reactRouterが表示することを決定したものは、 '＃react-root'要素に表示されます

3 - imports / ui / layouts / App.jsxにレイアウトファイルを作成する

import React, { Component } from 'react';
import PropTypes from 'prop-types';


class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.node
};

export default App;

4- imports / startup / client / Routes.jsxにRoutesファイルを作成する

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import App from '../../ui/layouts/App.jsx';

import NotFound from '../../ui/pages/NotFound.jsx';
import Index from '../../ui/pages/Index.jsx';


class Routes extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router history={ browserHistory }>
        <Route path="/" component={ App }>
          <IndexRoute name="index" component={ Index }/>
          <Route path="*" component={ NotFound }/>
        </Route>
      </Router>
    );
  }
}

Routes.propTypes = {};


Meteor.startup(() =>{
  ReactDOM.render(
    <Routes/>,
    document.getElementById('react-root')
  );
});

注意：

  • 物事を短くするために、作成する必要がある他のファイルを飛ばしています。具体的には、import / ui / pages {Index.jsx、NotFound.jsx}を確認してください。

  • 完全な例はhttps://github.com/rafa-lft/Meteor_React_Baseで見ることができます 。タグStep2_ReactRouterを探します。

ステップ3 - アカウントの追加

必要に応じて、プロジェクトディレクトリに移動しますcd MyAwesomeProject

1 - アカウントパッケージを追加する： meteor add accounts-base accounts-password react-meteor-data

2 - imports / startup / Routes.jsxのログインページとサインアップページへのルートを追加します 。render （）メソッドは次のようになります： 

  render() {
    return (
      <Router history={ browserHistory }>
        <Route path="/" component={ App }>
          <IndexRoute name="index" component={ Index }/>
          <Route name="login" path="/login" component={ Login }/>
          <Route name="signup" path="/signup" component={ Signup }/>
          <Route name="users" path="/users" component={ Users }/>
          <Route name="editUser" path="/users/:userId" component={ EditUser }/>
          <Route path="*" component={ NotFound }/>
        </Route>
      </Router>
    );
  }

注意：

  • 私はあなたが必要とするいくつかの他のファイルをスキップしています。特に、imports / startup / server / index.js imports / ui / layouts / {App、NavBar} .jsxとimport / ui / pages / {Login、Signup、Users、EditUser} .jsxを確認してください

  • 完全な例はhttps://github.com/rafa-lft/Meteor_React_Baseで見ることができます 。 Step3_Accountsタグを探します

役割を追加する

1-ロールの追加パッケージ（ https://github.com/alanning/meteor-roles）

meteor add alanning:roles

2 - いくつかのロール定数を作成します。ファイルimports / api / accounts / roles.js 

const ROLES = {
  ROLE1: 'ROLE1',
  ROLE2: 'ROLE2',
  ADMIN: 'ADMIN'
};

export default ROLES;

3 - ユーザーにロールを追加/更新する方法を示しません。サーバー側では、 Roles.setUserRoles(user.id, roles);によってユーザーロールを設定できますRoles.setUserRoles(user.id, roles); https://github.com/alanning/meteor-rolesおよびhttp://alanning.github.io/meteor-roles/classes/Roles.htmlで詳細を確認してください

4-すべてのアカウントと役割のファイルを既にセットアップしていると仮定します（ https://github.com/rafa-lft/Meteor_React_Baseの完全な例を参照してください 。タグStep4_rolesを探してください） 。異なるルートへのアクセス）インポート/スタートアップ/クライアント/ Routes.jsx 


class Routes extends Component {
  constructor(props) {
    super(props);
  }

  authenticate(roles, nextState, replace) {
    if (!Meteor.loggingIn() && !Meteor.userId()) {
      replace({
        pathname: '/login',
        state: {nextPathname: nextState.location.pathname}
      });
      return;
    }
    if ('*' === roles) { // allow any logged user
      return;
    }
    let rolesArr = roles;
    if (!_.isArray(roles)) {
      rolesArr = [roles];
    }
    // rolesArr = _.union(rolesArr, [ROLES.ADMIN]);// so ADMIN has access to everything
    if (!Roles.userIsInRole(Meteor.userId(), rolesArr)) {
      replace({
        pathname: '/forbidden',
        state: {nextPathname: nextState.location.pathname}
      });
    }
  }

  render() {
    return (
      <Router history={ browserHistory }>
        <Route path="/" component={ App }>
          <IndexRoute name="index" component={ Index }/>
          <Route name="login" path="/login" component={ Login }/>
          <Route name="signup" path="/signup" component={ Signup }/>

          <Route name="users" path="/users" component={ Users }/>

          <Route name="editUser" path="/users/:userId" component={ EditUser }
                 onEnter={_.partial(this.authenticate, ROLES.ADMIN)} />


          {/* ********************
           Below links are there to show Roles authentication usage.
           Note that you can NOT hide them by
           { Meteor.user() && Roles.userIsInRole(Meteor.user(), ROLES.ROLE1) &&
           <Route name=.....
           }
           as doing so will change the Router component on render(), and ReactRouter will complain with:
           Warning: [react-router] You cannot change <Router routes>; it will be ignored

           Instead, you can/should hide them on the NavBar.jsx component... don't worry: if someone tries to access
           them, they will receive the Forbidden.jsx component
           *************/ }
          <Route name="forAnyOne" path="/for_any_one" component={ ForAnyone }/>

          <Route name="forLoggedOnes" path="/for_logged_ones" component={ ForLoggedOnes }
                 onEnter={_.partial(this.authenticate, '*')} />

          <Route name="forAnyRole" path="/for_any_role" component={ ForAnyRole }
                 onEnter={_.partial(this.authenticate, _.keys(ROLES))}/>

          <Route name="forRole1or2" path="/for_role_1_or_2" component={ ForRole1or2 }
                 onEnter={_.partial(this.authenticate, [ROLES.ROLE1, ROLES.ROLE2])} />

          <Route name="forRole1" path="/for_role1" component={ ForRole1 }
                 onEnter={_.partial(this.authenticate, ROLES.ROLE1)}/>

          <Route name="forRole2" path="/for_role2" component={ ForRole2 }
                 onEnter={_.partial(this.authenticate, ROLES.ROLE2)} />


          <Route name="forbidden" path="/forbidden" component={ Forbidden }/>

          <Route path="*" component={ NotFound }/>
        </Route>
      </Router>
    );
  }
}

いくつかのルートにonEnterトリガを追加しました。これらのルートでは、どの役割を入力するかを渡しています。 onEnterコールバックは、もともと2つのパラメータを受け取ることに注意してください。アンダースコアの部分（ http://underscorejs.org/#partial）を使用してもう1つ（ロール）を追加するauthenticateメソッド（onEnterによって呼び出される）はロールを受け取り、

  • ユーザーがまったくログインしているかどうかを確認してください。そうでない場合、 '/ login'にリダイレクトされます。
  • ロール=== '*'の場合、ログインしているユーザーは誰でも入力できると仮定しているので、許可します
  • そうでなければ、ユーザーが許可されているかどうか（Roles.userIsInRole）を確認し、そうでなければ、禁止にリダイレクトします。
  • オプションで、行のコメントを解除することができます。そのため、ADMINはすべての行にアクセスできます。

このコードには、誰でも（onEnterコールバックなし）、ログされたユーザー、少なくとも1つのロールを持つログユーザー、特定のロールに対して許可されているルートの例がいくつかあります。

また、ReactRouter（バージョン3以上）では、Renderのルートを変更することはできません。したがって、Routes.jsx内の経路を非表示にすることはできません。そのため、authenticateメソッドに/ forbiddenをリダイレクトします。

ReactRouterとMeteorの一般的なバグは、表示されていないユーザーステータスの更新に関するものです。たとえば、ユーザーはログアウトしましたが、私たちはまだナビバーに彼/彼女の名前を表示しています。これはMeteor.user（）が変更されたために発生しますが、レンダリングは再実行されていません。

このバグは、createContainerのMeteor.user（）を呼び出すことで解決できます。次に、import / ui / layouts / NavBar.jsxで使用される、その例を示します。 

export default createContainer((/* {params}*/) =>{
  Meteor.user(); // so we render again in logout or if any change on our User (ie: new roles)
  const loading = !subscription.ready();
  return {subscriptions: [subscription], loading};
}, NavBar);

注意：

  • 私はあなたが必要とするいくつかの他のファイルをスキップしています。特に、imports / startup / server / index.js imports / ui / layouts / {App、NavBar} .jsxとimport / ui / pages / {Login、Signup、Users、EditUser} .jsxを確認してください

  • 完全な例はhttps://github.com/rafa-lft/Meteor_React_Baseで見ることができます 。タグStep4_rolesを探します



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow