node.js - 如果用户未经过身份验证，则显示公共(public)逻辑 React JS 和 Node API

Question

如果用户未登录，如何仅显示公共(public)内容(即:主页、关于、身份验证内容)？

我知道 SPA 并不意味着刷新，但我希望它能够更改页面上的大部分脚本。

环境:使用 ReactJS、WebPack 和现有的 NodeJS API，两者都在不同的项目中。

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

Answer 1

理想情况下，您可以通过在应用程序状态树中的某个位置存储 session token 来跟踪用户是否已登录。您可以使用 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 传递的。如果没有 session token ，它将重定向到/login。只要您的 API 在遇到无效 session token 时返回 HTTP 401，这对您来说就非常适合，您无需担心人们能够查看页面源代码。