Szukaj…
Wprowadzenie
Ten dokument pokaże, jak używać ReactRouter z Meteor i React. Od zera do działającej aplikacji, w tym ról i uwierzytelniania.
Pokażę każdy krok z przykładem
1- Utwórz projekt
2- Dodaj React + ReactRouter
3- Dodaj konta
4- Dodaj pakiety ról
Utwórz projekt
1- Po pierwsze, zainstaluj https://www.meteor.com/install
2- Utwórz projekt. ( --bare oznacza utworzenie pustego projektu)
meteor create --bare MyAwesomeProject
3- Utwórz minimalną strukturę plików ( -p aby utworzyć katalogi pośrednie):
cd MyAwesomeProject
mkdir -p client server imports/api imports/ui/{components,layouts,pages} imports/startup/{client,server}
4- Teraz utwórz plik HTML w 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- Upewnij się, że działa: (3000 to domyślny port, więc możesz pominąć „-p 3000”)
meteor run -p 3000
i otwarcie przeglądarki na „localhost: 3000”
Uwaga:
Pomijam kilka innych plików, które trzeba będzie utworzyć, aby wszystko było krótsze. W szczególności konieczne będzie utworzenie niektórych plików index.js w kliencie , plikach import / startup / {klient, serwer} i katalogach serwerów .
Możesz zobaczyć pełny przykład w https://github.com/rafa-lft/Meteor_React_Base . Poszukaj tagu Step1_CreateProject
Dodaj React + ReactRouter
W razie potrzeby przejdź do katalogu projektu cd MyAwesomeProject
1- Dodaj reagowanie i reagowanie routera
meteor npm install --save [email protected] [email protected] [email protected]
2- Edytuj klienta / main.html i zamień zawartość będzie:
<body>
<div id="react-root"></div>
</body>
Cokolwiek zareaguje router, pokaże to w elemencie „# reaguj-root”
3- Utwórz plik Layouts w import / 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- Utwórz plik trasy w pliku import / 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')
);
});
Uwaga:
Pomijam kilka innych plików, które trzeba będzie utworzyć, aby wszystko było krótsze. W szczególności sprawdź import / ui / pages {Index.jsx, NotFound.jsx}.
Możesz zobaczyć pełny przykład w https://github.com/rafa-lft/Meteor_React_Base . Poszukaj znacznika Step2_ReactRouter
Krok 3 - Dodaj konta
W razie potrzeby przejdź do katalogu projektu cd MyAwesomeProject
1- Dodaj pakiety kont: meteor add accounts-base accounts-password react-meteor-data
2- Dodaj trasy do stron logowania i rejestracji w import / startup / Routes.jsx Metoda render () będzie następująca:
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>
);
}
Uwaga:
Pomijam kilka innych plików, których będziesz potrzebować, aby wszystko skrócić. W szczególności sprawdź import / startup / server / index.js
Możesz zobaczyć pełny przykład w https://github.com/rafa-lft/Meteor_React_Base . Poszukaj tagu Step3_Accounts
Dodaj role
1- Dodaj pakiet ról ( https://github.com/alanning/meteor-roles)
meteor add alanning:roles
2- Utwórz niektóre stałe ról. W pliku import / api / account / roles.js
const ROLES = {
ROLE1: 'ROLE1',
ROLE2: 'ROLE2',
ADMIN: 'ADMIN'
};
export default ROLES;
3- Nie będę pokazywał, jak dodawać / aktualizować role użytkownika, wspomnę tylko, że po stronie serwera można ustawić role użytkowników za pomocą Roles.setUserRoles(user.id, roles); Sprawdź więcej informacji na https://github.com/alanning/meteor-roles i http://alanning.github.io/meteor-roles/classes/Roles.html
4- Zakładając, że już skonfigurowałeś wszystkie pliki kont i ról (zobacz pełny przykład w https://github.com/rafa-lft/Meteor_React_Base . Poszukaj tagu Step4_roles ) możemy teraz stworzyć metodę, która będzie odpowiedzialna za zezwolenie ( lub nie) dostęp do różnych tras. W import / 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>
);
}
}
Dodaliśmy wyzwalacz onEnter do niektórych tras. W przypadku tych tras mijamy również, do których ról można wejść. Zauważ, że callback onEnter, początkowo otrzymuje 2 parametry. Używamy częściowego podkreślenia ( http://underscorejs.org/#partial) , aby dodać kolejną (role) Metoda uwierzytelnienia (wywoływana przez onEnter) otrzymuje role i:
- Sprawdź, czy użytkownik jest w ogóle zalogowany. Jeśli nie, przekierowuje do „/ login”.
- Jeśli role === '*' zakładamy, że każdy zalogowany użytkownik może wejść, więc pozwalamy na to
- W przeciwnym razie sprawdzamy, czy użytkownik jest dozwolony (Roles.userIsInRole), a jeśli nie, przekierowujemy na zabronione.
- Opcjonalnie możesz anulować komentarz do linii, aby ADMIN miał dostęp do wszystkiego.
Kod zawiera kilka przykładów różnych tras, które są dozwolone dla każdego (bez wywołania zwrotnego onEnter), dla każdego zalogowanego użytkownika, dla każdego zalogowanego użytkownika z co najmniej 1 rolą i dla określonych ról.
Zauważ też, że ReactRouter (przynajmniej w wersji 3) nie pozwala na modyfikację tras w Render. Więc nie możesz ukryć tras w Routes.jsx. Z tego powodu przekierowujemy na / zabronione w metodzie uwierzytelnienia.
5- Często występujący błąd w ReactRouter i Meteor, związany z brakiem aktualizacji statusu użytkownika. Na przykład użytkownik się wylogował, ale nadal wyświetlamy jego / jej imię na pasku nawigacyjnym. Dzieje się tak, ponieważ Meteor.user () zmienił się, ale nie renderujemy ponownie.
Ten błąd można rozwiązać, wywołując Meteor.user () w createContainer. Oto przykład tego użyty w 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);
Uwaga:
Pomijam kilka innych plików, których będziesz potrzebować, aby wszystko skrócić. W szczególności sprawdź import / startup / server / index.js
Możesz zobaczyć pełny przykład w https://github.com/rafa-lft/Meteor_React_Base . Poszukaj tagu Step4_roles