खोज…
परिचय
यह दस्तावेज़ दिखाएगा कि 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- अब, क्लाइंट / 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
और 'लोकलहोस्ट: 3000' पर अपना ब्राउज़र खोलना
ध्यान दें:
मैं कुछ अन्य फ़ाइलों को छोड़ रहा हूं जिन्हें आपको बनाने की आवश्यकता होगी, चीजों को छोटा करने के लिए। विशेष रूप से, आपको क्लाइंट , आयात / स्टार्टअप / {क्लाइंट, सर्वर} और सर्वर निर्देशिकाओं में कुछ 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>
जो कुछ भी रिएक्टर राउटर दिखाने का फैसला करता है, वह इसे '# रिएक्शन-रूट' एलिमेंट में दिखाएगा
3- आयात / ui / लेआउट / 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- आयात / स्टार्टअप / ग्राहक / 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')
);
});
ध्यान दें:
मैं कुछ अन्य फ़ाइलों को छोड़ रहा हूं जिन्हें आपको बनाने की आवश्यकता होगी, चीजों को छोटा करने के लिए। विशेष रूप से, आयात / ui / पृष्ठों के लिए जाँच करें {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- आयात / स्टार्टअप / मार्गों में लॉगिन और साइनअप पेजों के मार्ग जोड़ें। रेंडर (रेंडर) विधि निम्नानुसार होगी:
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>
);
}
ध्यान दें:
मैं कुछ अन्य फ़ाइलों को छोड़ रहा हूं जिनकी आपको आवश्यकता होगी, चीजों को छोटा करने के लिए। विशेष रूप से, आयात / स्टार्टअप / सर्वर / index.js आयात / ui / लेआउट / {App, NavBar} .jsx और आयात / ui / पृष्ठों / {लॉगिन, साइनअप, उपयोगकर्ता, EditUser} .jxx की जाँच करें।
आप एक पूर्ण उदाहरण https://github.com/rafa-lft/Meteor_React_Base में देख सकते हैं। टैग के लिए देखो Step3_Accounts
भूमिकाएँ जोड़ें
1- रोल्स पैकेज जोड़ें ( https://github.com/alanning/meteor-roles)
meteor add alanning:roles
2- कुछ रोल्स कांस्टेंट बनाएं। फ़ाइल आयात / एपीआई / खातों / भूमिकाओं में
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 देखें ) अब हम एक विधि बना सकते हैं जो अनुमति के प्रभारी होगी। या नहीं) विभिन्न मार्गों तक पहुंच। आयात / स्टार्टअप / क्लाइंट / रूट्स.जेएसएक्स में
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>
);
}
}
हमने कुछ मार्गों पर एक ऑनर ट्रिगर जोड़ा है। उन मार्गों के लिए, हम भी गुजर रहे हैं, जिनमें से रोल्स को प्रवेश करने की अनुमति है। ध्यान दें कि ऑनर कॉलबैक, मूल रूप से 2 पाराम प्राप्त करता है। हम अंडरस्कोर के आंशिक ( http://underscorejs.org/#partial) का उपयोग कर रहे हैं, एक और एक (भूमिका) को जोड़ने के लिए प्रामाणिक विधि (onEnter द्वारा कहा जाता है) भूमिकाएं प्राप्त करता है और:
- जांचें कि क्या उपयोगकर्ता सभी में लॉग इन है। यदि नहीं, तो '/ लॉगिन' पर रीडायरेक्ट होता है।
- यदि भूमिकाएँ === '*' हम मान लेते हैं कि कोई भी लॉग इन किया हुआ उपयोगकर्ता प्रवेश कर सकता है, तो हम इसकी अनुमति देते हैं
- और, हम यह सत्यापित करते हैं कि उपयोगकर्ता अनुमत है (Roles.userIsInRole) और यदि नहीं, तो हम निषिद्ध करने के लिए पुनर्निर्देशित करते हैं।
- वैकल्पिक रूप से, आप एक लाइन को अनइंस्टॉल कर सकते हैं, इसलिए ADMIN की हर चीज तक पहुंच है।
कोड में विभिन्न मार्गों के कई उदाहरण हैं, जो किसी भी (बिना ऑनर कॉलबैक), किसी भी लॉग किए हुए उपयोगकर्ता के लिए, कम से कम 1 भूमिका वाले किसी भी लॉग इन उपयोगकर्ता के लिए, और विशिष्ट भूमिकाओं के लिए अनुमत हैं।
यह भी ध्यान दें, कि ReactRouter (कम से कम संस्करण 3 पर), रेंडर पर मार्गों को संशोधित करने की अनुमति नहीं देता है। तो आप मार्गों को रूट्स.jsx के भीतर छिपा नहीं सकते। उस कारण से, हम प्रामाणिक विधि में / निषिद्ध को पुनर्निर्देशित करते हैं।
5- ReactRouter और Meteor के साथ एक सामान्य बग, उपयोगकर्ता की स्थिति अपडेट से संबंधित नहीं दिखाया जा रहा है। उदाहरण के लिए उपयोगकर्ता लॉग आउट हो गया है, लेकिन हम अभी भी उसका / उसका नाम नाव-बार पर दिखा रहे हैं। ऐसा इसलिए होता है क्योंकि Meteor.user () बदल गया है, लेकिन हम पुन: प्रतिपादन नहीं कर रहे हैं।
CreateContainer में Meteor.user () को कॉल करके उस बग को हल किया जा सकता है। यहाँ इसका एक उदाहरण है, जिसका उपयोग आयात / ui / लेआउट / 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);
ध्यान दें:
मैं कुछ अन्य फ़ाइलों को छोड़ रहा हूं जिनकी आपको आवश्यकता होगी, चीजों को छोटा करने के लिए। विशेष रूप से, आयात / स्टार्टअप / सर्वर / index.js आयात / ui / लेआउट / {App, NavBar} .jsx और आयात / ui / पृष्ठों / {लॉगिन, साइनअप, उपयोगकर्ता, EditUser} .jxx की जाँच करें।
आप एक पूर्ण उदाहरण https://github.com/rafa-lft/Meteor_React_Base में देख सकते हैं। टैग के लिए देखें Step4_roles