Javascript 当登录状态为组件状态时，如何使用react路由器实现依赖于登录的路径？

我正试图实现from-repo，但是我遇到了我的用例的问题，作为一个初学者，我不会去尝试

我的登录状态基于是否存在CSRF cookie，因此我的应用程序中有一个方法，用于检索CSRF cookie并将其值保存在状态：

@autobind
class App extends React.Component {
  constructor() {
    super();

    this.state = {
      csrfToken : '',
      log : {}
    }
  }

setCSRFToken() {
  this.state = { csrfToken : cookie.load('csrf') };
  this.setState({ csrfToken : this.state.csrfToken });
}

loggedIn() {
  return !!this.state.csrfToken
}

由于我只想在登录时查看我的组件，因此我尝试根据loggedIn（）和onEnter={requireAuth}更改路由中的路径：

功能要求授权（下一状态，替换）{
如果（！App.loggedIn（））{
console.log（'未找到csrfToken，请求登录'）
替换({
路径名：'/login'，
状态：{nextPathname:nextState.location.pathname}
})
}
}
渲染((
)，document.querySelector（“#main”））

但是App.loggedIn（）不起作用，因为它不是一个公共函数。根据这一点，ReactJS中的公共函数无法访问React的体系结构所期望的内部状态，因此使用静态方法实现它是没有帮助的

---

我可能会继续并将登录状态保存在本地存储中，但我想知道在ReactJS中是否有不同的方法来解决此问题。

我正在存储（如Flux建议）和路由中设置登录状态：

const UserStore = require("./stores/UserStore.js");

let is_user_logged_in = !!UserStore.getToken();

UserStore.addChangeListener(() => {
    is_user_logged_in = !!UserStore.getToken();
});

function requireAuth(nextState, replaceState) {
    if (!is_user_logged_in) {
        replaceState({nextPathname: 'login'}, '');
    }
}

const routes = (
    <Route path="/" component={Layout}>
        <IndexRoute component={Home}/>
        <Route path="login" component={Login}/>
        <Route path="secret" component={Secret} onEnter={requireAuth}/>
        <Route path="*" component={NotFound}/>
    </Route>
);

module.exports = routes;

---

Hrrm，我希望我现在可以不用flux/redux。。。但我会尝试这种方法。在我接受之前，请你详细说明一下商店的概念或添加链接，这样答案就更详尽了？redux文档很好地概述了这个概念，我认为：reactjs.org上的文档非常枯燥，无法访问-（reactjs不应该提供这样的文档，因为这取决于开发人员。这不是reactjs，只是简单的javascript，带有一些称为flux的模式。将我的用户存储代码添加到了answerYeah，你是对的-我想只是想对reactjs文档大肆吹嘘；-）

const UserStore = require("./stores/UserStore.js");

let is_user_logged_in = !!UserStore.getToken();

UserStore.addChangeListener(() => {
    is_user_logged_in = !!UserStore.getToken();
});

function requireAuth(nextState, replaceState) {
    if (!is_user_logged_in) {
        replaceState({nextPathname: 'login'}, '');
    }
}

const routes = (
    <Route path="/" component={Layout}>
        <IndexRoute component={Home}/>
        <Route path="login" component={Login}/>
        <Route path="secret" component={Secret} onEnter={requireAuth}/>
        <Route path="*" component={NotFound}/>
    </Route>
);

module.exports = routes;

"use strict";
const AppDispatcher = require('./../dispatchers/AppDispatcher.js');
const EventEmitter = require('eventemitter3');
const assign = require('object-assign');
const store = require('store');
const Api = require('./../helpers/Api.js');
const UserActions = require('./../actions/UserActions.js');
import { browserHistory } from 'react-router';

const UserStore = assign({}, EventEmitter.prototype, {

    token: null,
    error: null,

    setError: function ({error}) {
        this.error = error;
    },

    getError: function () {
        return this.error;
    },

    setToken: function ({token}) {
        this.token = token;

        if (token !== null) {
            store.set('token', token);
        } else {
            store.remove('token');
        }
    },

    getToken: function () {
        return this.token;
    },

    emitChange: function () {
        this.emit('USER_CHANGE');
    },

    addChangeListener: function (cb) {
        this.on('USER_CHANGE', cb);
    },

    removeChangeListener: function (cb) {
        this.removeListener('USER_CHANGE', cb);
    },

});

AppDispatcher.register(function (action) {

    switch (action.actionType) {
        case 'user_login':
            Api.login({
                username: action.data.username,
                password: action.data.password,
                cb: function ({error, response}) {
                    if (error !== null) {
                        console.log('#dfd4sf424');
                        console.log(error);
                        UserActions.logout();
                    } else {
                        if (response['success'] === false) {
                            UserStore.setError({error: response['error']});
                            UserStore.emitChange();
                        } else {
                            UserStore.setError({error: null});
                            UserStore.setToken({token: response['auth-token']});
                            UserStore.emitChange();
                        }
                    }
                }
            });
            break;
        case 'user_logout':
            UserStore.setToken({token: null});
            UserStore.setError({error: null});
            UserStore.emitChange();
            break;
        case 'user_auto_login':
            UserStore.setToken({token: action.data.token});
            UserStore.setError({error: null});
            UserStore.emitChange();
            break;
    }
});

module.exports = UserStore;