수색…
소개
이 문서는 Meteor 및 React와 함께 ReactRouter를 사용하는 방법을 보여줍니다. 역할 및 인증을 포함하여 작동중인 앱까지 0에서.
예제를 통해 각 단계를 보여 드리겠습니다.
1- 프로젝트 만들기
2 - React + ReactRouter 추가
3 - 계정 추가
4- 역할 패키지 추가
프로젝트 만들기
1 - 먼저 https://www.meteor.com/install을 설치 하십시오.
2 프로젝트를 만듭니다. ( --bare 빈 프로젝트를 만드는 것입니다)
meteor create --bare MyAwesomeProject
최소 파일 구조 만들기 (중간 디렉토리 생성을위한 -p ) :
cd MyAwesomeProject
mkdir -p client server imports/api imports/ui/{components,layouts,pages} imports/startup/{client,server}
이제 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} 및 서버 디렉토리에 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')
);
});
노트 :
나는 물건을 더 짧게 만들기 위해 당신이 창조해야 할 다른 파일들을 건너 뛰고있다. 특히 imports / 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 / {로그인, 가입, 사용자, 편집 사용자} .jsx를 확인하십시오.
https://github.com/rafa-lft/Meteor_React_Base 에서 전체 예제를 볼 수 있습니다. Step3_Accounts 태그를 찾습니다.
역할 추가
1- 역할 추가 패키지 ( https://github.com/alanning/mete-roles)
meteor add alanning:roles
2 - 일부 역할 상수를 작성하십시오. 파일 가져 오기 / 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의 전체 예제를 참조하십시오 .Tep4_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)을 사용하여 다른 부분 (역할)을 추가합니다. onEnter가 호출하는 authenticate 메소드는 역할을 받고 다음을 수행합니다.
- 사용자가 전혀 로그인했는지 확인하십시오. 그렇지 않은 경우 '/ login'으로 리디렉션됩니다.
- 역할 === '*'인 경우 로그인 한 사용자가 입력 할 수 있다고 가정하므로 허용합니다.
- 그렇지 않으면 사용자가 허용되는지 (Roles.userIsInRole) 확인하고 그렇지 않은 경우 금지 된 것으로 리디렉션합니다.
- 선택적으로, 줄의 주석 처리를 제거 할 수 있으므로 ADMIN은 모든 항목에 액세스 할 수 있습니다.
이 코드에는 다른 모든 경로 (onEnter 콜백 없음), 기록 된 사용자, 최소한 하나의 역할을 가진 로그인 된 사용자 및 특정 역할에 대한 몇 가지 예가 있습니다.
또한 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 / {로그인, 가입, 사용자, 편집 사용자} .jsx를 확인하십시오.
https://github.com/rafa-lft/Meteor_React_Base 에서 전체 예제를 볼 수 있습니다. Step4_roles 태그를 찾습니다.