使用React路由器的服务器端身份验证流程

Question

我想知道如果我的应用程序正在渲染服务器端，如何使用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处理服务器端身份验证的更好方法吗？

Answer 1

您可以使用上下文 ，例如：

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'