Проблемы с изменением состояния приложения с помощью реагирующего маршрутизатора

Я пытаюсь перейти к просмотру/состоянию пользователя после того, как они вошли в систему и прошли аутентификацию, но, похоже, не могу заставить маршрутизатор реагировать на это.

Начальное состояние приложения — это просто статическая панель навигации с представлениями, которые правильно маршрутизируются, но когда пользователь входит в систему или аутентифицируется, я не уверен, что делать. Должен ли я изменить состояние панели навигации и создать новый реагирующий маршрутизатор специально для состояния пользователя, вошедшего в систему?

Я не думаю, что мне нужно использовать поток только потому, что нет необходимости хранить данные (кроме пользовательских данных)?

Вот как выглядят маршруты:

// React
var React = require("react");
var Router = require("react-router");
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var DefaultRoute = Router.DefaultRoute;

var App = require('./components/App.js');
var About = require('./components/About.js');
var Concat = require('./components/Concat.js');
var Home = require('./components/Home.js');
var Landing = require('./components/Landing.js');
var Login = require('./components/Login.js');
var Search = require('./components/Search');
var Signup = require('./components/Signup');


var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute handler={Landing} />
    <Route name="about" path='/about' handler={About}/>
    <Route name="concat" path='/concat' handler={Concat}/>
    <Route name="home" path='/home' handler={Home}/>
    <Route name="login" path='/login' handler={Login}/>
    <Route name="search" path='/search' handler={Search}/> 
    <Route name="signup" path='/signup' handler={Signup}/>       
  </Route>

);

module.exports = routes;

Это навбар:

var React  = require('react');
var Router = require('react-router');
var Link = Router.Link;

var Navbar = React.createClass({



  render: function () {
    return (
      <div className="navbar navbar-default navbar-static-top">
        <div className="container">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span className="icon-bar">test</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
          </div>
          <div className="collapse navbar-collapse">
            <ul className="nav navbar-nav">
              <li className="active"><Link to="home">Jobletics</Link></li>
              <li><Link to="concat">Create a Listing</Link></li>
              <li><Link to="search">Search Jobs</Link></li>
              <li><Link to="about">About</Link></li>
            </ul>
            <ul className="nav navbar-nav navbar-right">
              <li><Link to="login">Log in</Link></li>
              <li><Link to="signup">Sign up</Link></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});

module.exports = Navbar;

Мысль?


person rahul2001    schedule 30.06.2015    source источник


Ответы (1)


Есть пара вещей, которые вам еще нужно сделать. Здесь вам не нужен поток, но вам нужна небольшая обработка состояния. Вот ссылка на старую фиксацию/объяснение потока аутентификации от react-router.

https://github.com/rackt/react-router/blob/de9f8098baee3b5d24b1c337dc9aa0e7439a295e/examples/auth-flow/app.js

Причина, по которой я разместил более старый коммит, заключается в том, что самые обновленные из них используют es6 и даже неизданную версию, я полагаю. Тем не менее, эта ссылка должна отлично работать в вашем случае.

person Joseph Furlott    schedule 30.06.2015
comment
Спасибо, но в этом примере, где в этой функции рендеринга находится начальное состояние перед входом в систему? То есть, как выглядит приложение до входа в систему? После аутентификации есть панель инструментов. var loginOrOut = this.state.loggedIn ? ‹Link to=logout›Выйти‹/Link› : ‹Link to=logout›Войти‹/Link›; return ( ‹div› ‹ul› ‹li›{loginOrOut}‹/li› ‹li›‹Link to=about›About‹/Link›‹/li› ‹li›‹Link to=dashboard›Dashboard‹/Link› (проверено)‹/li› ‹/ul› ‹RouteHandler/› ‹/div› ); } }); - person rahul2001; 30.06.2015
comment
Код примера, который вы скопировали, только проверяет, вошел ли пользователь в систему или нет. Если они вошли в систему, покажите им опцию «Панель инструментов» в навигации, в противном случае покажите им ссылки на страницу входа. Mixin в основном проверяет, вошел ли пользователь в систему, когда он загружает этот компонент, и если это так, направляет их к этому компоненту (используя страницу, синхронизированную с помощью react-router), в противном случае направляет их на страницу входа, чтобы можно было войти в журнал в. - person Joseph Furlott; 30.06.2015