Javascript 如何使用React构建基于授权的系统？

我将要开发一个应用程序，该应用程序将基于经过身份验证的用户授权/角色/权限拥有一些页面/组件

首先：当未经验证的用户访问应用程序时，如何避免组件与

（例如）不同

他们如何根据用户的授权正确加载不同的组件集？例如：只有具有

manager

角色的用户才能看到

组件。只有

管理员

会看到

等等

这必须由服务器处理吗？我想是吧

---

如何使用React构建基于角色的应用程序？
（我认为这个问题也适用于其他客户端框架，如Angular）。

您可以在服务器端或客户端解决此问题。其主要思想是确定用户状态并处理它。例如，您可以将用户重定向到登录页面、显示警告消息或允许用户打开页面

在服务器上：您确定用户（通过cookies、令牌等）及其状态。如果可以，则将其传递给他，如果不可以，则重定向至登录页面

关于React和其他框架/库：再次需要确定用户状态。您可以通过发送API请求或在localstorage中获取存储的数据等方式来实现这一点。有几种方法可以实现这一点（我认为第1种方法更好）：

通过路由器。在React应用程序中，您可以使用并挂接。简言之，当路由匹配时，

oneter

hook将被调用，在那里你可以做任何你想做的事情

由服务器响应。如果是SPA，则可能需要加载一些数据以显示页面。因此，如果用户未经身份验证或无法获取此数据，服务器应返回401（未经身份验证/未登录）或403（未授权）状态。再说一次，你只需要处理这件事

这就是允许用户打开页面的全部内容。但是在页面上为不同的用户显示不同的块呢？假设我们需要在头中为经过身份验证的用户和管理员显示不同的链接集。使用React时的外观：

const Header = React.createClass({
    render() {
        return (
            <header>
                <a className="logo" href="/">Logo</a>
                // here you get the user role from the Flux store, localstorage or whatever you want
                {user.role === 'admin' ? this.renderAdminLinks() : this.renderAuthLinks()}
            </header>
        );
    },
    renderAuthLinks() {
        return (
            <ul>
                <a href="app">Dashboard</a>
                <a href="profile">Profile</a>
            </ul>
        );
    },
    renderAdminLinks() {
        return (
            <ul>
                <a href="admin">Admin Panel</a>
                <a href="stats">Statistics</a>
            </ul>
        );
    }
});

const Header=React.createClass({
render（）{
返回(
//在这里，您可以从Flux存储、localstorage或任何您想要的地方获得用户角色
{user.role==='admin'？this.renderAdminLinks（）：this.renderAuthLinks（）}
);
},
renderAuthLinks（）{
返回(


);
},
renderAdminLinks（）{
返回(


);
}
});

这只是一个示例，但对于更复杂的事情，您可以定义新组件，如

，

等等

---

同样的想法也适用于组件/视图中的Angular/Backbone/etc。您应该根据用户的状态决定要向用户显示的内容。

您可能希望交换整个页面，而不仅仅是部分。。。你也可能不需要一个视图框架来处理登录页面，这样你就可以在登录后保持花哨的代码朴素……因此你的ideia为每种域/角色提供不同的应用程序，在一个应用程序中登录，并重定向到授权的应用程序？一个或多个页面上的一个或多个应用程序，加上一个登录页面，在登录后重新指向应用程序页面。这样，你甚至不会让用户接触到他不应该看到的东西，而且一开始重新加载一页也不是一件讨厌的事情（想想gmail）。我发现只需简单的登录，然后转移到好东西，一切都会变得简单。您可以使用ajax连接所有的点，但是重新加载（甚至一次）可以简化很多。这里的问题是，非管理员用户可以通过查看代码找到为管理员提供的链接。OP询问如何根据用户角色加载模块，而不仅仅是从已经加载的模块中选择要使用的模块。因此，非管理员用户浏览器不应接收

renderAdminLinks（）

part。