Sök…
Introduktion
Detta dokument visar hur man använder ReactRouter med Meteor och React. Från noll till en fungerande app, inklusive roller och autentisering.
Jag ska visa varje steg med ett exempel
1- Skapa projektet
2- Lägg till React + ReactRouter
3- Lägg till konton
4 - Lägg till rollpaket
Skapa projektet
1- Installera https://www.meteor.com/install först
2- Skapa ett projekt. ( --bare är att skapa ett tomt projekt)
meteor create --bare MyAwesomeProject
3- Skapa den minimala filstrukturen ( -p att skapa mellanliggande kataloger):
cd MyAwesomeProject
mkdir -p client server imports/api imports/ui/{components,layouts,pages} imports/startup/{client,server}
4- Skapa nu en HTML-fil i 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- Se till att det fungerar: (3000 är standardporten, så att du faktiskt kan hoppa över '-p 3000')
meteor run -p 3000
och öppna din webbläsare på 'localhost: 3000'
Notera:
Jag hoppar över några andra filer som du behöver skapa för att göra saker kortare. Specifikt måste du skapa några index.js-filer i klient , import / start / klient, server} och serverkataloger .
Du kan se ett fullständigt exempel på https://github.com/rafa-lft/Meteor_React_Base . Leta efter taggen Step1_CreateProject
Lägg till React + ReactRouter
Byt om nödvändigt till din projektkatalog cd MyAwesomeProject
1- Lägg till react och react-router
meteor npm install --save [email protected] [email protected] [email protected]
2- Redigera client / main.html och ersätt innehållet kommer att vara:
<body>
<div id="react-root"></div>
</body>
Oavsett reactRouter bestämmer sig för att visa, kommer det att visas i elementet '# react-root'
3- Skapa layouts-filen i 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- Skapa Routes-filen i 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')
);
});
Notera:
Jag hoppar över några andra filer som du behöver skapa för att göra saker kortare. Kontrollera specifikt för import / ui / sidor {Index.jsx, NotFound.jsx}.
Du kan se ett fullständigt exempel på https://github.com/rafa-lft/Meteor_React_Base . Leta efter tagg Step2_ReactRouter
Steg 3 - Lägg till konton
Byt om nödvändigt till din projektkatalog cd MyAwesomeProject
1- Lägg till kontopaket: meteor add accounts-base accounts-password react-meteor-data
2- Lägg till rutten för inloggnings- och registreringssidor i import / startup / Routes.jsx Metoden render () kommer att vara följande:
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>
);
}
Notera:
Jag hoppar över några andra filer som du behöver för att göra saker kortare. Kontrollera specifikt import / startup / server / index.js import / ui / layouts / {App, NavBar} .jsx och import / ui / sides / {Logga in, Registrera, Användare, EditUser} .jsx
Du kan se ett fullständigt exempel på https://github.com/rafa-lft/Meteor_React_Base . Leta efter taggen Step3_Accounts
Lägg till roller
1- Lägg till rollpaket ( https://github.com/alanning/meteor-roles)
meteor add alanning:roles
2- Skapa några roller konstanter. I filimport / api / accounts / role.js
const ROLES = {
ROLE1: 'ROLE1',
ROLE2: 'ROLE2',
ADMIN: 'ADMIN'
};
export default ROLES;
3- Jag ska inte visa hur man lägger till / uppdaterar roller på en användare, jag kommer bara att nämna att på serversidan kan du ställa in användarroller av Roles.setUserRoles(user.id, roles); Kolla efter mer info på https://github.com/alanning/meteor-roles och http://alanning.github.io/meteor-roles/classes/Roles.html
4- Förutsatt att du redan har konfigurerat alla konton och rollfiler (se fullständigt exempel på https://github.com/rafa-lft/Meteor_React_Base . Leta efter taggen Step4_roles ) kan vi nu skapa en metod som kommer att ansvara för att tillåta ( eller inte) åtkomst till de olika rutterna. Vid import / start / klient / 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>
);
}
}
Vi har lagt till en onEnter- trigger till vissa rutter. För dessa rutter passerar vi också vilka roller som är tillåtna att ange. Observera att onEnter-återuppringningen ursprungligen får två paramer. Vi använder understreckens partiella ( http://underscorejs.org/#partial) , för att lägga till ytterligare en (roller) Autentiseringsmetoden (kallas av onEnter) får rollerna och:
- Kontrollera om användaren är inloggad alls. Om inte, omdirigerar du till '/ login'.
- Om roller === '*' antar vi att alla inloggade användare kan ange, så vi tillåter det
- Annars verifierar vi om användaren är tillåten (Roles.userIsInRole) och om inte, vi omdirigerar till förbjudet.
- Alternativt kan du avmarkera en rad, så ADMIN har tillgång till allt.
Koden har flera exempel på olika rutter som är tillåtna för alla (inget återuppringning), för alla loggade användare, för alla loggade användare med minst en roll och för specifika roller.
Observera också att ReactRouter (åtminstone i version 3) inte tillåter att ändra rutten på Render. Så du kan inte dölja rutten inom Routes.jsx. Av den anledningen omdirigerar vi till / förbjudet i autentiseringsmetoden.
5- Ett vanligt fel med ReactRouter och Meteor avser användarstatusuppdateringar som inte visas. Till exempel loggade användaren ut, men vi visar fortfarande hans / hennes namn på nav-fältet. Det händer eftersom Meteor.user () har förändrats, men vi återger inte.
Det felet kan lösas genom att ringa Meteor.user () i createContainer. Här är ett exempel på det som används i 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);
Notera:
Jag hoppar över några andra filer som du behöver för att göra saker kortare. Kontrollera specifikt import / startup / server / index.js import / ui / layouts / {App, NavBar} .jsx och import / ui / sides / {Logga in, Registrera, Användare, EditUser} .jsx
Du kan se ett fullständigt exempel på https://github.com/rafa-lft/Meteor_React_Base . Leta efter tagg Step4_roles