서버 측 리액터 라우터 사용자 인증

Question

저는 Koa 서버 위에 ReactRouter를 실행하고 있습니다.

모든 요청이 'index.html'(koa-connect-history-api-fallback 사용)을 가리키고, 요청이 ReactRouter로 전달되도록 My Koa 서버가 구성됩니다. 이 모든 것이 잘 작동합니다. 사용자 인증 방법을 알아내는 데 어려움이 있습니다.

경로를 보호하려면 사용자가 경로에 액세스하기 위해 로그인해야합니다. 문제는 내 로그인 페이지가 경로 중 하나임을 의미합니다. 즉 로그인 페이지에 액세스하려면 사용자가 로그인해야합니다.

이 문제를 해결하는 좋은 방법이 있습니까? 예를 들어, Koa 서버에서 '/ login'경로를 제외한 모든 경로를 어떻게 든 보호 할 수 있습니까? ReactRouter 내에서 인증을 처리하는이 example을 읽었지 만 클라이언트 측에서 인증을 얻는 것으로 보입니다. 나는 기초로부터 떨어져있을 수 있었다.

경우

당신의 호기심, 나는이 경우 react-redux-starter-kit

Answer 1

데코레이터를 사용하여 최상위 구성 요소를 인증 할 수 있습니다.

// auth.js 
import React, {Component} from 'react'; 
import { connect } from 'react-redux'; 

export default function(ComposedComponent) { 
    class Auth extends Component { 
     static contextTypes = { 
      router: React.PropTypes.object 
     } 

     componentWillMount() { 
      if (!this.props.authenticated) { 
       this.context.router.push('/'); 
      } 
     } 

     componentWillUpdate(nextProps) { 
      if (!nextProps.authenticated) { 
       this.context.router.push('/'); 
      } 
     } 

     render() { 
      return <ComposedComponent {...this.props} /> 
     } 
    } 

    function mapStateToProps(state) { 
     return {authenticated: state.auth.authenticated}; 
    } 

    return connect(mapStateToProps)(Auth); 
} 

과 :

@auth 
...your component... 

또는 당신이 인증 모듈이 있다면 당신은 더 적은 "reduxy"방법으로 그것을 할 수 :

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="login" component={Login} /> 
     <Route path="logout" component={Logout} /> 
     <Route path="about" component={About} /> 
     <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
    </Router> 
), document.getElementById('example')) 

Answer 2

을 일하고 있어요 나는 ReactRouter와 경로를 보호하는 책임을두고 실제로 렌더링하고 싶은 경로를 파악하기 위해 서버에 match을 사용/

중요한 것은 요청이 Koa 서버에 오면 사용자 인증 여부와 그 역할을 알 수있는 인증 미들웨어를 통해 실행한다는 것입니다. 그런 다음이 정보를 Redux 상점에 반영해야합니다.

{ 
    user: { 
    authenticated: true, 
    role: 'admin' 
    } 
} 

을, 또는 더 나은 당신은 감속기가 당신을 위해이 작업을 수행 가게에 작업을 파견 할 수 :이 같은 초기 상태의 무언가 가게를 생성 할 수 중 하나.

이제 서버에서 경로를 생성하면 (저장소를 전달할 때) React Router는 정상적인 것과 그렇지 못한 것을 정확히 알 수 있습니다. 즉, user.authenticated을 확인하여 경로를 onEnter으로 보호 한 경우 서버에서 match을 호출하면 해당 메시지가 적용되고 /login과 같은 리디렉션이 반환됩니다. 예제 onEnter은 다음과 같습니다

const ensureLoggedIn = (nextState, replace) => { 
    if (!store.getState().user.authenticated)) { 
     replace('/login'); 
    } 
}; 

당신은 그 match에 콜백의 인수입니다 redirectLocation에 재 캡처 할 수 있습니다. 모든 일치에 대해 here을 읽으십시오. 그런 다음 서버 res.redirect을 새 위치로 사용할 수 있습니다.

물론 이러한 유형의 경로 보호는 편리 할 뿐이지 만 중요한 정보가 포함 된 API 끝점을 합법적으로 보호해야합니다. 그러나이 방법은 클라이언트와 서버에서 동일한 라우팅을 사용하여 거의 노력하지 않기 때문에 매우 중요합니다.