为不同的角色创建单独的 UI

Question

我在我的应用程序中有两个角色，比如 Customer 和 Provider，我想在他们通过身份验证后为他们创建单独的 UI，保持登录屏幕相同并有一个收音机显示 "I'm a Customer" 和 "I'm a Provider" 的按钮，这在注册期间也是相同的。

我正在寻找更好的方法，我不知道如何开始。

我已经为客户提供了现有的 UI 界面，但现在需要的是 "Provider" 界面。这样客户就可以直接与供应商进行交互、发送需求、查询。目前，客户应用程序通过电子邮件发送这些请求。

Answer 1

首先，您应该检测并定义哪些组件将同时显示，哪些组件仅显示一个或另一个。在您确切知道您的应用程序将如何运行后，angularjs 提供了许多本机指令来管理不同的情况。

看看：

ng-if ng-switch ng-hide ng-show

这些对你会有很大的帮助。但始终记得管理安全服务器端，Web 应用程序很容易被操纵，如果您使用角色和不同的权限，请将此作为必备条件。

顺便说一句，请考虑通过以下某些方式使用 angularjs $routeProvider 来管理权限：

    $routeProvider.when('/admin/users', {
        controller: 'userListCtrl',
        templateUrl: 'js/modules/admin/html/users.tmpl.html',
        access: {
            requiresLogin: true,
            requiredPermissions: ['Admin', 'UserManager'],
            permissionType: 'AtLeastOne'
    });

或

    $routeProvider.
        when('/admin', {
            templateUrl: 'Your template url',
            controller: 'AdminController',
            permission: 'AccessAdministration',
            resolve: {
                permissionList: function (permissionService) { return permissionService.getPermissions(); }
        }
    })

为不同的角色创建单独的 UI

Creating Separate UI for different Roles

user-interface

node.js

angularjs

loopbackjs