リアクタールーターのユーザー役割（Firebase）のベストプラクティス

Question

私のアプリケーションには、従業員と管理者という2つの役割があります。 ミドルウェアを実装しようとしているため、コンテンツを見る権限がないユーザーはリダイレクトされます。 React Routerの一般的な認証だけでなく、ユーザーの役割も正しく処理されていますか？

私の最初の考えは、firebase.auth（）。currentUserにカスタムロール属性を追加することでしたが、firebaseによってcurrentUserに属性を追加することはできません。

もしそうなら、どうすればいいですか？ 状態を介して、あるいは、これは

var requireEmp = (nextState, replace, next) => { 
var role; 
var uid = firebase.auth().currentUser.uid; 
firebase.database().ref('/users/' + uid + '/role').once('value').then((user) => { 
    role = user.val().role; 
}); 
if (role !== 'employee') { 
    replace('/');  
} 
next(); 
}; 

を?:ように私のFirebase DBからそれをフェッチ...

<Router history={hashHistory}> 
<Route path="/" > 
    <Route path="home" component={Main} onEnter={requireLogin}> 
    <Route path="work" component={Work} onEnter={requireEmp}/> 
    <Route path="profile" component={Profile} /> 
    <IndexRoute component={Profile}/> 
    </Route> 
</Route> 
</Router> 

私が反応するように新しいと再来とまだ少し状態で作業を怖がっおよび重要ですユーザーロール属性などのデータ

私はユーザーの役割の実装に関して本当に注意する必要がある他の領域は何ですか？

ありがとうございました。

Answer 1

このユーザーロールを有効にすることができます。すべてのプロジェクトには具体的な内容がありますが、ここではどうすればいいのですか。

最初にアプリケーションをレンダリングする前に、firebase user/currentUser/currentAuthがロードされていることを確認しておく必要があります。 。あなたが役割を持っている場合は、ちょうどそれがユーザーがログインしているITフェッチすることを確認してください

ここでは例です：

index.jsxで：

myFirebase.js上

import { initializeApp } from './myFirebase'; 

const routes = routesConfig(store); 

let appHasRendered = false; 

const renderAppOnce =() => { 
    if (appHasRendered) return; 

    render(
    <Provider store={store}> 
     <Router history={syncedHistory} routes={routes} /> 
    </Provider>, 
    document.getElementById('app') 
); 

    appHasRendered = true; 
}; 

initializeApp(renderAppOnce, store.dispatch); 

、その後：

export const initializeApp = (renderAppOnce, dispatch) => { 
    firebaseAuth.onAuthStateChanged((user) => { 

    if (user) { 
     // We have a user, lets send him and his role to the store 

     firebaseRef.child('users/roles').once('value', (snap) => { 
     dispatch(authLoggedIn({ 
      ...user.toJSON(), 
      role: snap.val() || 'employee' 
     })); 
     renderAppOnce(); 
     }); 

    } else { 
     // There's no user, let's move on 
     dispatch(authLoggedOut()); 
     renderAppOnce(); 
    } 
    }); 
}; 

大丈夫です！我々は私たちの店で必要なものすべてを持っています。おそらく

const routesConfig = (store) => { 
    // Confirms user is not authenticated 
    const confirmNoAuth = (nextState, replace) => { 
    if (store.getState().user) { 
     replace({ pathname: '/', state: { nextPathname: nextState.location.pathname } }); 
    } 
    }; 

    // Confirms user is authenticated 
    const confirmAuth = (nextState, replace) => { 
    if (!store.getState().user) { 
     replace({ pathname: '/', state: { nextPathname: nextState.location.pathname } }); 
    } 
    }; 

    // Confirms user has a specific role 
    const confirmRole = role => ((nextState, replace) => { 
    if (store.getState().user.role !== role) { 
     replace({ pathname: '/', state: { nextPathname: nextState.location.pathname } }); 
    } 
    }); 

    return (<Route path="/"> 
    <IndexRoute component={HomePage} /> 
    <Route path="login" component={LoginPage} onEnter={confirmNoAuth} /> 
    <Route path="dasboard" component={DashboardPage} onEnter={confirmAuth} /> 
    <Route path="adminsonly" component={AdminDashboardPage} onEnter={confirmRole('admin')} /> 
    </Route>); 
}; 

Theresのこのコードで問題のトンを、私はあなたが原理を理解できると信じて：だから今、私たちは我々のアプリの私達のフォーカス取得時の機能にそれを確認する必要があります。基本的には、ルートを変更するたびに行う必要がないように、役割を事前取得する必要があります。

もう1つのヒントは、たくさんの従業員と少数の管理者がいる場合は、管理者を保存することです。この方法では、何十万という代わりに、ロールオブジェクトに20個のエントリしかないでしょう。その小さい|| 'employees'はあなたに多くのスペースを節約することができます。

必要に応じて、さらに多くの役割を簡単に追加できます。また、この例ではReduxを使用していますが、そうする必要はありません。

!!!重要!!!

これはすべて、人々がページにアクセスすることを防ぎますが、スマートアイコンは、コンソールや休憩クライアントを使用して、鼻をデータベースの一部に貼り付けることができます。あなたのデータベースを安全に保つために、firebase rulesを理解し、よく活用してください！

私はそれが働いたらお知らせください