如果用户未经过身份验证，则显示公共逻辑React JS和Node API

Question

如果用户未登录，我如何只显示公开（例如：home，about，身份验证内容）？

我知道SPA并不打算刷新，但我希望它能够改变页面上的大多数脚本。

环境：在单独的项目中使用ReactJS，WebPack和现有的NodeJS API。

我浏览了Webpack文档，并了解它只会加载所需的脚本和组件，但所有脚本都可以通过“查看页面源”看到。如果我理解错误的方式，请纠正我。

Answer 1

理想情况下，您可以通过在应用程序状态树中的某处存储sessiontoken来跟踪用户是否已登录。您可以使用Redux之类的东西来管理应用程序中的状态。如果用户未登录，您首先需要确定需要重定向到哪条路由。请求需要身份验证的路由。假设您有2条路线 / login 和 / products 。您希望确保只有经过身份验证的用户才能查看/ products部分。实现此目的的方法是通过检查状态的sessiontoken值重定向到/ login，您可以将其作为props传递给映射到/ products路由的Products组件。

使用类似 react-router

的内容

在“产品”组件中，使用以下内容

class Products extends Component{
    componentWillUpdate(nextProps, nextState, nextContext) {
        let {sessiontoken}=nextProps;
        if (!sessiontoken)
           nextContext.router.push('/login');
    }
}

Products.contextTypes = {
    router: React.PropTypes.object.isRequired
}

在上面的代码中，我们正在读取sessiontoken的值，该值从更高阶的Container组件作为props传递。如果没有sessiontoken，它将重定向到/ login。只要您的API在遇到无效的sessiontoken时返回HTTP 401，这将完全适合您，您无需担心人们能够查看页面源。