React Router 사용자 역할 (Firebase) 모범 사례

Question

내 응용 프로그램에는 Employee 및 Admin의 두 가지 역할이 있습니다. 콘텐츠를 볼 권한이없는 사용자가 리디렉션되도록 미들웨어를 구현하려고합니다. 일반적인 인증뿐만 아니라 React Router의 사용자 역할도 잘 다루고 있습니까?

내 최초의 생각은 firebase.auth(). currentUser에 사용자 정의 역할 속성을 추가하는 것이었지만 firebase에 의해 currentUser에 속성을 추가하는 것은 허용되지 않았습니다.

그렇다면 어떻게해야합니까? 상태를 통해 또는 같은 내 중포 기지 DB에서 그것을 가져 오는이

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(); 
}; 

...

<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는 아마 톤,하지만 난 당신이 원리를 이해 수 있다고 생각 : 그래서 지금 우리는 우리의 응용 프로그램의 우리의 onEnter 기능에 그것을 확인해야합니다. 기본적으로 역할을 미리 가져 와서 모든 경로 변경시이를 수행 할 필요가 없습니다.

다른 팁 중 하나는 직원 수와 소수의 관리자 만 있으면 관리자 만 저장할 수 있다는 것입니다. 이렇게하면 수십만 개가 아닌 역할 개체에 20 개의 항목 만있을 수 있습니다. 그 작은 || 'employees'은 많은 공간을 절약 할 수 있습니다.

필요한 경우 역할을 쉽게 추가 할 수 있습니다. 또한이 예제는 Redux를 사용하지만 사용자는 필요하지 않습니다.

!!! 중요 !!!

이 모든 것은 사람들이 페이지에 액세스하는 것을 막을 수 있지만, 스마트 폰은 콘솔이나 휴식 클라이언트를 사용하여 데이터베이스의 일부분에 코를 붙이지 않도록 할 수 있습니다. 데이터베이스를 안전하게 유지하려면 firebase rules을 잘 이해하고 사용하십시오!

작동 여부 알림