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

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

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

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

Server-Side Auth Flow with React Router

authentication

url-routing

reactjs

react-router

isomorphic-javascript

场景：