Добавить авторизацию для взаимодействия маршрутизаторов

Question

Я определил маршрутизаторы в своем приложении-ответе. У меня есть 3 страницы в моем приложении. После того, как пользователь успешно войдет в систему, он перейдет на следующие экраны. Поток работает нормально. Но есть проблема. Когда я напрямую ввожу URL-адрес для других страниц в своем приложении, он загружает эту страницу независимо от того, зарегистрирован ли пользователь или нет. Я хочу добавить чек об этом. Если пользователь не зарегистрирован, он должен быть перенаправлен на страницу входа в систему.

Это мои маршруты

<Route path="/" component={LoginPage}/> 
     <Route path='app' component={App}> 
      <IndexRoute component={Home}/> 
      <Route path='/video-screen' component={VideoScreen}> 
       <IndexRoute component={TagList}/> 
       <Route path='/add' component={AddTags}/> 
       <Route path='/TagList' component={TagList}/> 
       <Redirect from='*' to='/'/> 
      </Route> 
     </Route> 
    </Router> 

И это метод моего логина компонента, который проверяет учетные данные и принять пользователя на следующую страницу, если Войти успешна

handleLoginButtonClick() { 
     var that = this; 
     let token; 
     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url": "https://www.backend.example.raccte.com/auth/login/", 
      "method": "POST", 
      "credentials": 'include', 
      "headers": { 
       "content-type": "application/x-www-form-urlencoded", 
      }, 
      "data": { 
       "password": document.getElementById("password").value, 
       "username": document.getElementById("username").value 
      }, 
      success:(response, textStatus, jQxhr)=> { 
       this.props.tokenAction(response.auth_token); 
      } 
     } 

     $.ajax(settings).done((response) => { 

      token = response.auth_token 

      console.log(token); 
      this.context.router.push('/app') 
     }); 

Обновления

function authorize(){ 
      if(window.localStorage.token == null){ 
       browserHistory.push('/') 
      } 
     } 
    function getRoutes(store) { 


     return (
      <Router> 
       <Route path="/" component={LoginPage}/> 
       <Route path='app' component={App} onEnter={this.authorize}> 
        <IndexRoute component={Home}/> 
        <Route path='/video-screen' component={VideoScreen}> 
         <IndexRoute component={TagList}/> 
         <Route path='/add' component={AddTags}/> 
         <Route path='/TagList' component={TagList}/> 
         <Redirect from='*' to='/'/> 
        </Route> 
       </Route> 
      </Router> 
     ) 
    } 
    export default getRoutes; 

дает мне сообщение об ошибке Uncaught ReferenceError: authorize не определен

Answer 1

Маршруты имеют функцию onEnter, которую вы можете использовать для этого. Допустим, у вас есть функция авторизации внутри компонента, содержащего материал React router. Вы могли бы сделать что-то вроде этого (некоторые псевдо-код здесь):

authorize() { 
    if (user is NOT authorized) browserHistory.push(login page) 
} 

<Route path="/" component={LoginPage}/> 
    <Route path='app' component={App} onEnter={this.authorize}/> 
</Router> 

Таким образом, даже если они входят в URL прямо в строке браузера URL, функция OnEnter еще называют, и если они не вошли в систему он перенаправит их на страницу входа.

Answer 2

Издание является у объявил свой метод authorize в App компонента, вам необходимо объявить его в файле, где вы определили все routes, как это:

function authorize(){ 
    console.log('hello'); 
} 

<Router> 
    <Route path="/" component={LoginPage}/> 
    <Route path='app' component={App} onEnter={authorize}> 
     <IndexRoute component={Home}/> 
     <Route path='/video-screen' component={VideoScreen}> 
      <IndexRoute component={TagList}/> 
      <Route path='/add' component={AddTags}/> 
      <Route path='/TagList' component={TagList}/> 
      <Redirect from='*' to='/'/> 
     </Route> 
    </Route> 
</Router> 

Answer 3

Я использую высшего порядка Компоненты для этой проверки этот Exemple

RequireAuth

import React, { Component, PropTypes } from 'react' 
import { connect } from 'react-redux' 



export default function (ComposedCmponent) { 
class RequireAuth extends Component { 
componentWillMount() { 
    //we need to check if user is authenticated before the component will mount 
    //here i check if the user is authenticated i'm using JWT authentification for this exemple, usually i use local storage to save the token and we can check the validation of the token 
    //If the user is not authenticated we redirect to /login 
    let validtoken = window.localStorage.getItem('id_token') 
    if (!this.props.isAuthenticated || !validtoken) { 
    this.context.router.push('/login') 
    } 
} 

componentWillUpdate (nexProps) { 
    // we need to the same as we did in componentWillMount 
    // in case component will update the use not authenticated 
    //If the user is not authenticated we redirect to /login 
    if (this.props.isAuthenticated !== nexProps.isAuthenticated) { 
    if (!nexProps.isAuthenticated) { 
     this.context.router.push('/login') 
    } 
    } 
} 

render() { 
    //now the user is authenticated we render the component passed by  HOC component 
    return (
    <ComposedCmponent {...this.props} /> 
) 
} 
} 

и если я хочу обеспечить путь я использую мой HOC RequireAuth в маршрутизаторе

<Route path='/' component={App}> 
    <Route path='/dashboard' component={requireAuth(Dashboard)} /> 
</Route>