AngularJS:使用具有多个模型的设备

2023-12-07

我有一个 Rails 应用程序,使用具有 2 个不同模型的设计,对应于截然不同的角色(没有 STI - 完全不同的模型)。

我计划转向 AngularJS 前端。想知道构建应用程序的最佳方式是什么。

以下是我的初步想法:

  1. 每个用户模型都有不同的基本登录页面(domain.com/user 和domain.com/company)
  2. 在渲染该页面之前,我使用 devise 检查正确的角色是否已登录,如果没有则重定向到相应的登录页面(服务器端重定向)
  3. 所有未登录的页面都是非 Angular 的,以便有效地实现这一点。
  4. 登录页面均已 Angular 化

这确保了我不必担心 Angular 和 devise 能够很好地协同工作。在模块中我可以确定有登录的用户(或公司)

如果这听起来不错,请提出建议。

另外,如果有(不是太复杂)整个应用程序都可以使用 Angular 的方式,我会更喜欢。 (登录重定向到相应的登录页面等)。我见过一些以服务模块等形式出现的 Angular + Devise 示例,但几乎所有这些示例似乎都只适用于一种模型。

EDIT:我希望能够尽可能多地使用 Devise 的功能。


建造一个两头的 Auth 怪物

所以你所描述的情况是可能的,但肯定会很痛苦。您必须构建一堆代码来确定用户是 Rails 端的 NormalUser 还是 AdminUser。在 Angular 方面,您必须确定用户需要哪种登录,NormalUser 与 AdminUser。话虽这么说,这是可能的,这里有一些应该有所帮助的建议。

文档是你的朋友

您真的非常非常想很好地了解 Devise 的工作原理。Devise 在幕后发挥了很多魔力。

对于授权使用Angular,你需要熟悉$httpProvider.拦截器, Services, and 资源.

Rails

Routes

在 Devise 中拥有两个模型的示例路线:

devise_for :normal_users

devise_for :admin_users

# route for the sample controller below
resource :users do
  collection do
    get :current
  end
end

设备带来了什么

设计将创造辅助方法在你的控制器中沿着以下路线:

current_normal_user

authenticate_normal_user!

current_admin_user

authenticate_admin_user!

因此,您必须检查两者以查看会话是否已通过身份验证,最好的计划是将这两项检查包装到自定义中before_action,类似的东西before_action :authenticate_all_users.

用户控制器示例

这是一个例子UsersControllers返回 JSON Angular 将用于检查身份验证。

class UsersController < ApplicationController
  # Needs a before_action that authenticates the user

  respond_to :json

  def current
    @user = current_normal_user || current_admin_user

    respond_with @user
  end

end

Angular

安全网

我发现这个拦截器在 Angular 中处理身份验证时非常有用。将其添加到您的app.config设置 Angular 时,如果任何 http 请求返回 401 状态代码,它会重定向到指定页面。这比强制所有资源处理用户未经身份验证的可能性更简单。 (如咖啡脚本)

# Monitors the requests and responses of angular
#  * Redirects to /users/sign_in if status is a 401
app.config [
  "$httpProvider"
  ($httpProvider) ->
    $httpProvider.interceptors.push ($q) ->
      request: (config) ->
        config or $q.when(config)

      requestError: (rejection) ->
        $q.reject rejection

      response: (response) ->
        response or $q.when(response)

      responseError: (rejection) ->

        # Not logged in, redirect to login
        if rejection.status is 401
          $q.reject rejection

           # Change this with desired page
          window.location = "/users/sign_in"

        else
          $q.reject rejection

在您的场景中,您可能需要添加逻辑来确定他们应该看到哪个登录页面,normal_user 与 admin_user。

用户信息

最后是一个获取用户信息的 Angular 服务示例。如果用户未通过身份验证,401状态将被之前的捕获$httpProvider并对用户进行相应处理。否则,如果用户通过身份验证,则用户的信息将填充到$rootScope.currentUser。您只需将其添加为应受身份验证保护的控制器中的依赖项。 (在咖啡脚本中)

angular.module("TheAngularApp.services").service "CurrentUserService", ($rootScope, $http, CurrentUser, User) ->
    userService =
        reloadCurrentUser: ->
            @currentUser = CurrentUser.show((user) ->
                # set in scope
                $rootScope.currentUser = user
            )
            @currentUser

    userService.reloadCurrentUser()
    userService

该服务取决于CurrentUser指向的资源/users/current.json端点。在使用 CurrentUserService 的场景中,处理多个模型的可能选项有:

  • 检查两次用户是否已通过身份验证,一次检查 normal_user,另一次检查 admin_user
  • 创建一个自定义控制器方法来检查normal_user和admin_user的身份验证,这大致就是示例rails控制器正在做的事情。

额外学分

或者,我会调查ng-idle作为允许会话在 Angular 中过期的一种方式。


评论更新

当后端请求用户信息时,我的登录页面开始显示,因此登录页面的重定向非常明显,并导致糟糕的用户体验。

最简单的方法是使用非角度页面进行登录,例如 Devise 提供的页面。用户成功登录后,他们被定向到的页面将加载 Angular 应用程序。这样,您始终可以假设用户在使用 Angular 时已登录。

如果这不可能,您将必须从 Angular 发出身份验证请求。这意味着您需要让用户等待,直到您可以检查身份验证请求中的承诺。一旦有效,您就可以将用户移动到正确的路线。

WARNING我相信如果您登录失败,Devise 会发送一个状态代码 401,这将使前面讨论的拦截器失效。为了解决这个问题,拦截器必须排除处理身份验证请求的路径。

用于处理身份验证的示例资源:

Session.create {email: email, password: password}, success = (user) ->
   # User was successfully authenticated
   $scope.currentUser = user
   $location.path( "/" );  
, error = (data, status, headers, config) ->
   # Failed to auth, notify user
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:使用具有多个模型的设备 的相关文章

随机推荐

  • 用于初始化的日期格式

    在 VBScript 中 我需要用日期初始化变量 在我的国家 我们通常使用以下格式指定日期 日月年 这是我试图在 VBScript 中执行的操作 Date 07 06 1973 MsgBox FormatDateTime Date vbLo
  • 两个字段注释的乘积

    目前我的 Django 应用程序中有一行如下所示 db execute SELECT SUM price qty FROM inventory orderline WHERE order id s self id 我宁愿通过 Django
  • Windows Phone 8.1 中 UIElement 拖放延迟

    我正在使用ManipulationDelta事件处理程序将一个简单的椭圆拖放到屏幕上的画布中 我在几个地方使用在线发布的标准方法 以下是我的事件处理程序中的代码 Ellipse dragableItem sender as Ellipse
  • 如何在C#中从x509证书获取数字签名值

    有谁知道如何使用 C 从 x509 证书获取数字签名值 实际上位于 x509Store 中 而不是从文件中验证 并在文本框中显示它 我知道 GetRawCertDataString 返回整个 x509 证书的原始数据 其中包括最后一行的数字
  • 使用 UIWebView 上传照片

    我想直接从 UIWebView 上传照片 该视图具有用于文件上传的 HTML 表单 当我单击按钮时 我会看到拍照或选择现有照片的选项 但是当我单击这两个选项中的任何一个时 我得到 警告 尝试呈现
  • 在Python中定义名称

    我很困惑为什么我的程序不起作用 我应该使用嵌套的 if 来询问人们的姓名和头衔 医生 女性 男性 然后打印出女士姓名 先生姓名或医生姓名 如果有人知道我遇到的问题 请回复 name input Enter your name title i
  • 从不寻常的 svn 目录结构迁移到 maven?

    与 正常 svn 目录结构相反 我使用以下结构 trunk project1 project2 project3 branches project1 branch project1 project2 project2 branch proj
  • DatePicker 无法在 ajax 加载的页面中工作

    我将日期选择器附加到全局脚本文件中的输入 如下所示 document on focusin datePick function this datepicker dateFormat dd mm yy changeMonth true cha
  • 查询网格内的点 Maya python api

    我试图找出一种计算世界空间点是否位于任意网格内部的方法 如果它不是立方体或球体 我不太确定如何计算它的数学 任何帮助都会很棒 人们可以使用一种简单的光线追踪技巧来测试您是在形状的内部还是外部 事实证明 2D 3D 对象甚至可能更高维度的对象
  • 表 [表名] 未锁定

    我正在编写一个锁定表的 MySQL 查询 LOCK TABLE table 1 WRITE 之后 我正在执行一些函数 并且在其中一个函数中 我正在另一个未锁定的表上执行另一个查询 SELECT FROM completely differe
  • 可以将其作为 SQL Server 作业吗?

    我有一个文件夹 其中包含用于使用徽章的图像 我有另一个文件夹 其中包含图像的重命名版本 该文件夹位于另一台计算机上 我需要创建一个过程来复制和重命名找到的任何新图像 名称之间的映射位于 SQL Server DB 中 将其创建为 SQL S
  • 使用 CMake 检测 Qt5

    我正在尝试在 Ubuntu 上安装和使用 Qt 5 为我的需要 Qt 5 的项目运行 CMake 会导致 The C compiler identification is GNU 4 8 4 The CXX compiler identif
  • 确保 epmd 已启动

    我有一个 eunit 测试 它生成唯一的节点名称并开始分发 A B C now Nodename list to atom lists flatten io lib format test b b b localhost A B C ok
  • 在 Macos 上安装 xampp 的 mongodb 扩展

    我找了一晚上 也没找到解决办法 我尝试通过运行来安装 mongodb 扩展sudo Applications XAMPP xamppfiles bin pecl install mongodb但最后我得到这个错误 fatal error u
  • 选择表数据到数组 - 仅获取一行

    我正在尝试从表中获取数据EmailList并将其放入一个数组中 该数组将被传递到 Outlook 电子邮件的 收件人 字段 电子邮件的脚本已创建 我计划使用Join 函数将数组组合成字符串 如下所示 Join varEmailList My
  • 如何修复 Python 中的 unicode/cPickle 错误?

    ids cPickle loads gem value loads argument 1 must be string not unicode cPickle loads想要一个字节字符串 这正是cPickle dumps输出 然后你给它提
  • MongoDB:如何查询 json 字符串?

    有一个 MongoDB 集合 其中填充了如下文档 id ObjectId 5b7f83b591fae49715443590 content n t email email protected n t country code US n 如你
  • SOLR 在第一个方面查询时很慢,但在以后的查询中相当快

    我试图找出为什么我的 SOLR 4 1 实例对于方面查询非常慢 索引大约有200M文档 服务器有64GB RAM 我的查询如下所示 q CampaignId 1462 0ASourceDateUtc 2014 01 01T00 00 00
  • Backbone collection.create() 不返回更新后的模型

    为了学习骨干 我创建了一个类似 Twitter 的应用程序 所以你知道 Twitter 每隔 N 秒向服务器发送一个 GET 请求来检查新推文 如果有新的推文 它会创建隐藏的推文li元素并显示带有 N 个新推文 的按钮 如果你点击它 它会显
  • AngularJS:使用具有多个模型的设备

    我有一个 Rails 应用程序 使用具有 2 个不同模型的设计 对应于截然不同的角色 没有 STI 完全不同的模型 我计划转向 AngularJS 前端 想知道构建应用程序的最佳方式是什么 以下是我的初步想法 每个用户模型都有不同的基本登录