我想知道如果我的应用程序正在呈现服务器端，如何使用 React Router 准确实现身份验证流？
当用户第一次到达应用程序时，我们调用一个onEnter路由器方法来检查当前用户是否存在 ( localStorage)，如果存在，我们会将他们重定向到他们的仪表板，否则我们将他们重定向到登录页面。
因此，当我的应用遇到我的受保护路线时onEnter，理想情况下会发生以下情况：
onEnter: () => {
if (localStorage.getItem('authToken')) {
// Authenticate and redirect user to intended path
} else {
// Redirect the user to the login page
}
}
这里的问题是，因为我们是在服务器端渲染，所以我们无法访问诸如localStorage. 任何人都可以提出一种克服这个问题的方法，或者一种使用 React Router 处理服务器端身份验证的更好方法吗？
您可以使用context，例如：
import React, { Component, PropTypes, Children } from 'react'
class Provider extends Component {
static childContextTypes = {
isAuthed: PropTypes.bool
}
constructor(props) {
super(props);
this.initialData = isClient ? window.__initialData__ : props.initialData;
}
getChildContext() {
return {
isAuthed: this.initialData.isAuthed
};
}
render() {
let { children } = this.props;
return Children.only(children);
}
}
并包装：
// The server creates this object:
const initialData = {
isAuthed: true
};
if (IS_CLIENT) {
ReactDOM.render(
<Provider>
<Router history={createHistory()}>{Routes}</Router>
</Provider>,
document.getElementById('app')
);
}
if (IS_SERVER) {
// Using renderToStaticMarkup/renderToString etc on:
<Provider initialData={initialData}>
<RoutingContext {...renderProps} />
</Provider>
}
然后，您可以从任何组件在服务器或客户端上访问它：
import React, { Component, PropTypes } from 'react'
class SomeComponent extends Component {
static contextTypes = {
isAuthed: PropTypes.bool
}
constructor(props, context) {
super(props, context);
console.log(context.isAuthed); // this.context outside ctor
}
}
简单的客户端检查类似 typeof document !== 'undefined'