Reactjs React路由器、JWT Cookie、Flux、身份验证和；固态继电器

社区好

我的应用背景有点复杂，但我觉得我的问题不是。 因此，我有一个由注册/登录/私有组件组成的应用程序的首次亮相。My routes.js包含以下内容

// routes.js
function requireAuth(nextState, transition) {
  if (!LoginStore.isLoggedIn()) {
    transition.to('/login', null, { nextPathname: nextState.location.pathname });
  }
}
<Route component={require('./components/App')} >
  <Route path="/" component={require('./components/Home')} />
  <Route path="/login" component={require('./components/LogIn')} />
  <Route path="/signup" component={require('./components/SignUp')} />
  <Route path="/private" component={require('./components/Private')} onEnter={requireAuth}/>
</Route>

我觉得我应该将cookie发送到server.js中的路由器，这样就可以设置LoginStore了，但我不知道怎么做，这可能不是最好的解决方案。在这个问题上，我非常感谢你的帮助

---

提前感谢您。

您的解决方案与我的类似。在调用

路由器之前，使用
react cookie
在服务器上对每个请求操作cookie并修补save/delete方法。运行

。还要确保你的路线是同步的

import Iso from 'iso';
import React from 'react';
import ReactDomServer from 'react-dom/server';
import Router from 'react-router';
import Location from 'react-router/lib/Location';
import cookie from 'react-cookie';
import routes from '../../app/routes';
import Alt from '../../app/lib/Alt';
import AltBootstrap from '../lib/AltBootstrap';

export default {render};

function render(req, res, next) {
  cookie.setRawCookie(req.headers.cookie); // THIS
  cookie.save = res.cookie.bind(res); // THIS

  let location = new Location(req.path, req.query);
  Router.run(routes, location, (error, state, transition) => {
    if (error) return next(error);
    if (transition.isCancelled) return res.redirect(transition.redirectInfo.pathname);

    AltBootstrap.run(state, req).then(snapshot => {
      Alt.bootstrap(snapshot);

      let markup = ReactDomServer.renderToString(<Router {...state}/>);
      let html = Iso.render(markup, Alt.flush());
      res.render('index', {html});
    }).catch(next);
  });
}

从“Iso”导入Iso；
从“React”导入React；
从“react dom/server”导入ReactDomServer；
从“反应路由器”导入路由器；
从“react router/lib/Location”导入位置；
从“反应cookie”导入cookie；
从“../../app/routes”导入路由；
从“../app/lib/Alt”导入Alt；
从“../lib/AltBootstrap”导入AltBootstrap；
导出默认值{render}；
函数呈现（req、res、next）{
cookie.setRawCookie（req.headers.cookie）；//这个
cookie.save=res.cookie.bind（res）；//这个
let location=新位置（请求路径、请求查询）；
Router.run（路由、位置、（错误、状态、转换）=>{
if（error）返回next（error）；
if（transition.isCancelled）返回res.redirect（transition.redirectInfo.pathname）；
AltBootstrap.run（state，req）。然后（snapshot=>{
Alt.bootstrap（快照）；
让markup=ReactDomServer.renderToString（）；
让html=Iso.render（markup，Alt.flush（））；
res.render（'index'，{html}）；
}).接住（下一个）；
});
}

此处提供了完整的源代码：

GET http://localhost/private [HTTP/1.1 302 Moved Temporarily 30ms]
GET http://localhost/login [HTTP/1.1 200 OK 51ms]
GET http://localhost/bundle.js [HTTP/1.1 200 OK 30ms]

import Iso from 'iso';
import React from 'react';
import ReactDomServer from 'react-dom/server';
import Router from 'react-router';
import Location from 'react-router/lib/Location';
import cookie from 'react-cookie';
import routes from '../../app/routes';
import Alt from '../../app/lib/Alt';
import AltBootstrap from '../lib/AltBootstrap';

export default {render};

function render(req, res, next) {
  cookie.setRawCookie(req.headers.cookie); // THIS
  cookie.save = res.cookie.bind(res); // THIS

  let location = new Location(req.path, req.query);
  Router.run(routes, location, (error, state, transition) => {
    if (error) return next(error);
    if (transition.isCancelled) return res.redirect(transition.redirectInfo.pathname);

    AltBootstrap.run(state, req).then(snapshot => {
      Alt.bootstrap(snapshot);

      let markup = ReactDomServer.renderToString(<Router {...state}/>);
      let html = Iso.render(markup, Alt.flush());
      res.render('index', {html});
    }).catch(next);
  });
}