meteor
Meteor + React + ReactRouter

Android Angular 2 AngularJS Cordova HTML JavaScript jQuery MongoDB Node.js React
Suche…


Einführung

Dieses Dokument zeigt, wie Sie ReactRouter mit Meteor und React verwenden. Von Null bis zu einer funktionierenden App, einschließlich Rollen und Authentifizierung.

Ich zeige jeden Schritt mit einem Beispiel

1- Erstellen Sie das Projekt

2- Fügen Sie React + ReactRouter hinzu

3- Konten hinzufügen

4- Fügen Sie Rollenpakete hinzu

Erstellen Sie das Projekt

1- Installieren Sie zunächst https://www.meteor.com/install

2- Erstellen Sie ein Projekt. ( --bare soll ein leeres Projekt erstellen)

meteor create --bare MyAwesomeProject

3- Erstellen Sie die minimale Dateistruktur ( -p , um Zwischenverzeichnisse zu erstellen):

cd MyAwesomeProject

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

4- Erstellen Sie nun eine HTML-Datei in client / main.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- Stellen Sie sicher, dass es funktioniert: (3000 ist der Standardport, sodass Sie '-p 3000' tatsächlich überspringen können)

meteor run -p 3000

und öffnen Sie Ihren Browser unter 'localhost: 3000'

Hinweis:

  • Ich überspringe einige andere Dateien, die Sie erstellen müssen, um die Dinge zu verkürzen. Insbesondere müssen Sie einige index.js-Dateien in den Verzeichnissen client , import / start / {client, server} und server erstellen.

  • Sie können ein vollständiges Beispiel unter https://github.com/rafa-lft/Meteor_React_Base anzeigen. Suchen Sie nach dem Tag Step1_CreateProject

Fügen Sie React + ReactRouter hinzu

Wechseln Sie ggf. in Ihr Projektverzeichnis cd MyAwesomeProject

1- Fügen Sie den Reakti- und Reakt-Router hinzu

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

2- Bearbeiten Sie client / main.html und ersetzen Sie den Inhalt wie folgt: 

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

Was auch immer der ReaktRouter zeigt, der zeigt es im '# Reakt-Wurzel'-Element

3- Erstellen Sie die Layouts-Datei in Importe / 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- Erstellen Sie die Routes-Datei in Imports / startup / client / Routes.jsx 

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')
  );
});

Hinweis:

  • Ich überspringe einige andere Dateien, die Sie erstellen müssen, um die Dinge zu verkürzen. Suchen Sie insbesondere nach Importen / ui / pages {Index.jsx, NotFound.jsx}.

  • Sie können ein vollständiges Beispiel unter https://github.com/rafa-lft/Meteor_React_Base anzeigen. Suchen Sie nach dem Tag Step2_ReactRouter

Schritt 3 - Konten hinzufügen

Wechseln Sie ggf. in Ihr Projektverzeichnis cd MyAwesomeProject

1- Hinzufügen von Kontopaketen: meteor add accounts-base accounts-password react-meteor-data

2- Fügen Sie die Routen für die Anmeldung und die Registrierung von Seiten in Imports / startup / Routes.jsx hinzu. Die Methode render () lautet wie folgt: 

  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>
    );
  }

Hinweis:

  • Ich überspringe einige andere Dateien, die Sie benötigen, um die Dinge zu verkürzen. Überprüfen Sie die Importe / startup / server / index.js und importieren Sie / ui / layouts / {App, NavBar} .jsx und importieren Sie / ui / pages / {Anmelden, Registrieren, Benutzer, EditUser} .jsx

  • Sie können ein vollständiges Beispiel unter https://github.com/rafa-lft/Meteor_React_Base anzeigen. Suchen Sie nach dem Tag Step3_Accounts

Rollen hinzufügen

1- Rollenpaket hinzufügen ( https://github.com/alanning/meteor-roles)

meteor add alanning:roles

2- Erstellen Sie einige Rollenkonstanten. In Datei importiert / api / accounts / rolls.js 

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

export default ROLES;

3- Ich werde nicht zeigen, wie man Rollen zu einem Benutzer hinzufügt / aktualisiert. Ich werde nur erwähnen, dass auf Serverseite Benutzerrollen nach Roles.setUserRoles(user.id, roles); Weitere Informationen finden Sie unter https://github.com/alanning/meteor-roles und http://alanning.github.io/meteor-roles/classes/Roles.html

4- Wenn Sie bereits alle Konten- und Rollendateien eingerichtet haben (siehe vollständiges Beispiel unter https://github.com/rafa-lft/Meteor_React_Base . Suchen Sie nach dem Tag Step4_roles ), können Sie jetzt eine Methode erstellen, die die Genehmigung zulässt oder nicht) Zugang zu den verschiedenen Routen. In Importe / Startup / Client / 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>
    );
  }
}

Wir haben einigen Routen einen onEnter- Trigger hinzugefügt. Für diese Routen passieren wir auch, welche Rollen betreten dürfen. Beachten Sie, dass der Callback von onEnter ursprünglich 2 Parameter empfängt. Wir verwenden Unterstriche ( http://underscorejs.org/#partial) , um eine weitere (Rollen) hinzuzufügen. Die Authentifizierungsmethode (von onEnter aufgerufen) erhält die Rollen und:

  • Prüfen Sie, ob der Benutzer überhaupt angemeldet ist. Wenn nicht, wird auf '/ login' umgeleitet.
  • Bei Rollen === '*' gehen wir davon aus, dass jeder eingeloggte Benutzer teilnehmen kann, also erlauben wir es
  • Andernfalls überprüfen wir, ob der Benutzer berechtigt ist (Roles.userIsInRole), und wenn nicht, leiten wir zu verboten weiter.
  • Optional können Sie eine Zeile auskommentieren, sodass ADMIN auf alles zugreifen kann.

Der Code enthält mehrere Beispiele für unterschiedliche Routen, die für jeden (kein onEnter-Rückruf), für jeden protokollierten Benutzer, für jeden protokollierten Benutzer mit mindestens einer Rolle und für bestimmte Rollen zulässig sind.

Beachten Sie auch, dass ReactRouter (zumindest in Version 3) die Routen beim Rendern nicht ändern darf. Sie können also die Routen nicht innerhalb der Routes.jsx ausblenden. Aus diesem Grund werden in der Authentifizierungsmethode Weiterleitungen zu / verboten.

5- Ein häufiger Fehler bei ReactRouter und Meteor bezieht sich auf Aktualisierungen des Anwenderstatus. Zum Beispiel hat sich der Benutzer abgemeldet, aber wir zeigen immer noch seinen Namen in der Navigationsleiste. Dies geschieht, weil sich Meteor.user () geändert hat, aber wir werden nicht erneut gerendert.

Dieser Fehler kann durch Aufrufen von Meteor.user () im createContainer behoben werden. Hier ist ein Beispiel davon, das in import / ui / layouts / NavBar.jsx verwendet wird: 

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);

Hinweis:

  • Ich überspringe einige andere Dateien, die Sie benötigen, um die Dinge zu verkürzen. Überprüfen Sie die Importe / startup / server / index.js und importieren Sie / ui / layouts / {App, NavBar} .jsx und importieren Sie / ui / pages / {Anmelden, Registrieren, Benutzer, EditUser} .jsx

  • Sie können ein vollständiges Beispiel unter https://github.com/rafa-lft/Meteor_React_Base anzeigen. Suchen Sie nach dem Tag Step4_roles



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow