我发现在 React 中执行此操作的最佳方法是将csrf
令牌添加到存储中,或者将其传递给组件上下文。
您可以通过稍微改变Yahoo Fluxible react-router 示例来了解它是如何完成的。
context.executeAction(setTokenAction, req.csrfToken(), function(){});
csrf
这将使用令牌作为参数执行通量操作。Yahoo Flux 架构通过以下方式将 store 的值序列化到客户端:
var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
这会以脚本标签的形式写入页面,然后可以在客户端 JavaScript 中访问。它看起来像这样:
<script>
window.App = {
context: {
dispatcher: {
stores: {
ApplicationStore: {
csrf: "1234abcd",
}
}
}
}
};
</script>
这是 Flux 示例中的 Html.jsx 组件。
如果您没有创建同构应用程序(React 组件在服务器和客户端上运行),那么我建议只写一个包含csrf
令牌的脚本标签。
对于 Fluxible,该值会在客户端上重新水化。
var dehydratedState = window.App; // Sent from the server
var app = require('./app');
app.rehydrate(dehydratedState, function (err, context) {
...
});
无需额外的 http 请求即可在客户端上为您提供一个填充存储。然后,您可以csrf
通过访问商店从任何地方访问令牌。
您可以通过执行以下操作通过上下文传递它:
var componentContext = context.getComponentContext();
componentContext.csrf = req.csrfToken();
...
var markup = React.renderToString(Component({context: componentContext}))
然后,您可以通过组件的 props 访问它。
this.props.context.csrf
如果您正在使用 Fluxible 并希望通过上下文传递它,我可能会在插件中执行它,但您明白了。
完整的服务器代码:
/**
* Copyright 2014, Yahoo! Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
require('babel/register');
var express = require('express');
var favicon = require('serve-favicon');
var serialize = require('serialize-javascript');
var navigateAction = require('./actions/navigate');
var setCsrfTokenAction = require('./actions/setCsrfToken');
var debug = require('debug')('Example');
var React = require('react');
var app = require('./app');
var HtmlComponent = React.createFactory(require('./components/Html.jsx'));
var Router = require('react-router');
var server = express();
server.use(favicon(__dirname + '/../favicon.ico'));
server.use('/public', express.static(__dirname + '/build'));
server.use(function (req, res, next) {
var context = app.createContext();
debug('Executing navigate action');
Router.run(app.getComponent(), req.path, function (Handler, state) {
context.executeAction(setCsrfTokenAction, req.csrfToken(), function(){});
context.executeAction(navigateAction, state, function () {
debug('Exposing context state');
var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
debug('Rendering Application component into html');
var Component = React.createFactory(Handler);
var html = React.renderToStaticMarkup(HtmlComponent({
state: exposed,
markup: React.renderToString(Component({context:context.getComponentContext()}))
}));
debug('Sending markup');
res.send(html);
});
});
});
var port = process.env.PORT || 3000;
server.listen(port);
console.log('Listening on port ' + port);