2017-04-13 7 views
2

他のライブラリでどのように行われているかを例を見てきましたが、私はreact-navigationを使用しています。ここでユーザーが認証されていない場合にネイティブで反応するログイン画面への経路

は、コード例です:あなたがここに見つけることができます

const MainTabs = TabNavigator({ 
    Profile: { screen: ProfileScreen }, 
    Home: { screen: HomeScreen }, 
}); 

const RootNavigator = StackNavigator({ 
    Main: { screen: MainTabs }, 
    Login: { screen: LoginScreen }, 
},{ 
    initialRouteName: "Login", 
    headerMode: "none", 
}); 

export default RootNavigator; 

全アプリコード:https://snack.expo.io/Hy8IXWppg

ユーザー認証のステータスが私のサーバー上でチェックされます。

ユーザーが認証されていない場合にアプリケーションの起動時にユーザーのログイン画面が表示されるようにしたいが、理想的には、セッションをサーバー上で削除または期限切れにした場合にユーザーをログインにルーティングするとよいでしょう。

つまり、任意のコード部分からいつでも実行できるようにしたいと考えています。

は、私はのようなコードでこれを行うことができます知っている(userIsLoggedInは私のカスタム認証チェック方法である)が、私は、各コンポーネントに手動でこのアクションを実行したくない画面部品の内部

if(!userIsLoggedIn()) { 
    this.props.navigation.dispatch(
     NavigationActions.navigate({routeName: 'Login'})); 
} 

以下。しかし、私は別の選択肢を持っていないだろう、どこにuserIsLoggedIn()チェックを入れますか? consructor/componentWillMount/componentWillUpdateの内部では?

UPDATE

私は私が認証を必要とするすべての画面/ルートを指定することができるようになる解決策を期待。

私はいくつかのカスタムルールでここでルートを使用しなければならないようです。 しかし、標準ルータには2種類あります:TabRouterとStackRouterです。私は3レベルのナビゲーション明らか

StackNavigator 
    LoginScreen 
    RegisterScreen 
    AboutScreen 
    FirstLevelTabNavigator 
     Tab1: AccountScreen 
     Tab2: SecondLevelTabNavigator 
      Tab1Screen 
      Tab2Screen 
      Tab3Screen 

を持っているつもりです

、ログイン、登録およびについて画面は、認証を必要としませんが、アカウントにアクセスしようとする試みで、Tab1Screen、Tab2ScreenまたはTab3Screenユーザーが必要LoginScreenにリダイレクトされます。

各ナビゲータに3台のルータを今すぐ構築する必要がありますか?

+0

私はちょうど同じusecaseを持っています、上記の質問に対する答えを見つけましたか? userIsLoggedInをどこに置くか、カスタムルーターを構築しましたか? – Jeremie

+0

こんにちは、他のアプリエリアに切り替えました。一時的な解決策として、各アプリの起動時にログイン画面に移動します。 – gumkins

答えて

0

私はあなたの最初の画面になる別の画面を持っているべきだと思います。これはちょうどActivityIndicatorであるシンプルなコンポーネントです。その場合は、サーバーに確認し、それに応じてナビゲートする必要があります。

Ex。 InitialComponent

componentWillMount() { 

    getStatus(this.navigate.bind(this)) 
} 

navigate(loggedIn) { 
    this.setState({animating: false}); 
    if(loggedIn) { 
     navigate to Main 
    } else { 
     navigate to Login 
    }  
    } 

render() { 
    return(<View> <ActivityIndicator animating={this.state.animating}/> </View>); 

} 

これはまた、あなたが(例えば、要求は時間がかかる場合)、それらをリダイレクトする前に、何かを処理しているユーザーを示すという利点を持っているでしょう。

関連する問題