アクセスを制限する（Meteor + React Router + Roles）

Question

私はMeteorアプリケーションで反応ルータを使用してalanning Meteor-rolesを実装しようとしています。私は私のルート上にonEnter={requireVerified}を使用しようとしています

：すべては、私は流星-役割を試してみましたalanning役割やMeteor.user()

を使用してルートを制限するために、適切に管理することはできませんという事実を除いて正常に動作しています。これはコードです：

const requireVerified = (nextState, replace) => { 
    if (!Roles.userIsInRole(Meteor.userId(), ['verified'],'user_default')) { 
     replace({ 
      pathname: '/account/verify', 
      state: { nextPathname: nextState.location.pathname }, 
     }); 
    } 
}; 

I）は、（Meteor.userで試してみました：

const requireVerified = (nextState, replace) => { 
    if (!Meteor.user().isverified == true) { 
    replace({ 
     pathname: '/account/verify', 
     state: { nextPathname: nextState.location.pathname }, 
    }); 
    } 
}; 

私は経路リンクをクリックしていたときにこれが働いている、しかし、私は手動で更新すると（F5 ）、 それは動作しません。それを掘り下げた後、ページを手動で更新するときにMeteor.user()が準備ができていないことがわかりました。

私はMeteor.userid（）またはMeteor.logginInを（知っている）が働いているが、私だけではなく、彼らが記録されていることが、彼らは「検証済み」または が役割を持っているかどうかを確認するために を望んでいました。

どちらの場合も、それは同じだ、componentDidMount()またはcomponentWillMount()と、反応する私はまたしてコンポーネントの中身をチェックしてみましたcompenentがマウントされる前に、手動で新鮮はMeteor.user()ロードされません。

だから、流星/羽目板の役割+反応ルータでコンポーネント/ルートを制限する最良の方法は何ですか？ （私はTheMeteorChefのベースの内側に反応したコンポーザーを使用しています）

ありがとう。私はまだ試していません

Answer 1

注意、それはあなたが試みることができる提案

ことの一つは、そのような「反応 - 流星-データ」からcreateContainerと一緒componentWillReceivePropsを使用することです：

import React, { Component, PropTypes } from 'react'; 
import { Meteor } from 'meteor/meteor'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import { Roles } from 'meteor/alanning:roles'; 

class MyComponent extends Component { 
    componentWillReceiveProps(nextProps) { 
    const { user } = nextProps; 
    if (user && !Roles.userIsInRole(user._id, ['verified'], 'user_default')) { 
     browserHistory.push('/account/verify'); 
    } 
    // If Meteor.user() is not ready, this will be skipped. 
    } 
} 

MyComponent.propTypes = { 
    user: PropTypes.object, 
}; 

export default createContainer(() => { 
    const user = Meteor.user() || null; 
    return { user }; 
}, MyComponent); 

フローを説明するには、ページが読み込まれたときに、Meteor.user（）が定義されていないと言ったように、アクセス権をチェックすることができません。ただし、Meteor.user（）が定義されると、テンプレートの更新がトリガーされ、新しい小道具はcomponentWillReceivePropsに渡されます。この時点で、userが定義されているかどうかを確認し、必要に応じてリダイレクトすることができます。

何かを欠場していない、本当に確かに、私は実際に（引数として小道具を取る関数を定義し、constructor()とcomponentWillReceiveProps()の両方でそれを呼び出す）だけでなくconstructor()で検証を置きます。