reactjs - 使用 React Router 的服务器端身份验证流程

Question

我想知道如果我的应用程序在服务器端渲染，如何使用 React Router 准确实现身份验证流程？

场景:

当用户首次到达应用程序时，我们会调用 onEnter 路由器方法来检查当前用户是否存在 (localStorage)，如果他们是我们的话将他们重定向到他们的仪表板，否则我们将他们重定向到登陆页面。

因此，当我的应用程序访问 protected 路由 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

您可以使用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'