在使用 RouteProvider 在 Angular 中启动路由之前,如何检查登录或其他状态?

2024-05-13

假设我有 4 条路线 - 2 条要求用户登录,2 条不需要。我的应用程序初始化如下所示:

        $routeProvider.when('/open1',{templateUrl:'/open1.html',controller:'Open1'});
        $routeProvider.when('/open2',{templateUrl:'/open2.html',controller:'Open2'});
        $routeProvider.when('/secure1',{templateUrl:'/secure1.html',controller:'Secure1'});
        $routeProvider.when('/secure2',{templateUrl:'/secure2.html',controller:'Secure2'});

Routes /open1 and /open2向所有人开放,而路线/secure1 and /secure2要求用户登录,如果没有登录,则采取一些操作,例如重定向到登录或启动警告。我可以通过使用我的Auth服务和呼叫,例如Auth.isLogin()。所以结果是:

  • 即将/open1 and /open2始终转到上面声明的模板和控制器
  • if Auth.isLogin()返回真,/secure1 and /secure2转到上面声明的模板和控制器
  • if Auth.isLogin()返回假,/secure1 and /secure2采取其他行动,例如$location.path('/login')

I could将逻辑放入Secure1 and Secure2控制器进行检查,但这是重复的并且混淆了职责,使它们更难以测试等。

有什么方法可以让我使用$routeProvider声明“检查此路由和此路由,如果没有,则重定向”?我正在考虑使用resolve不知何故,但不太确定如何在(文档上resolve不是很清楚,并且很少有有用的例子)。

EDIT:

根据下面的答案,似乎有三种哲学可以做到这一点:

  • Using resolve检查登录并失败承诺,然后捕获$routeChangeError要重定向的事件http://www.sitepoint.com/implementing-authentication-angular-applications/ http://www.sitepoint.com/implementing-authentication-angular-applications/
  • 仅使用$routeChangeStart用于检查登录和重定向的事件http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/ http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/
  • 仅使用解析来检查登录并重定向http://midgetontoes.com/blog/2014/08/31/angularjs-check-user-login http://midgetontoes.com/blog/2014/08/31/angularjs-check-user-login

第二个选项是两位回答者所建议的。


正如我上面的评论,有 3 种不同的路径(如果您想从 html 模板中控制它,还可以使用指令)。我最终跟随

https://midgetontoes.com/angularjs-check-user-login/ https://midgetontoes.com/angularjs-check-user-login/

其本质如下:

$routeProvider.when('/secure', {
    templateUrl: '/secure.html', 
    controller: 'Secure',
    resolve:{
        loggedIn:onlyLoggedIn
    }
 });

进而onlyLoggedIn:

var onlyLoggedIn = function ($location,$q,Auth) {
    var deferred = $q.defer();
    if (Auth.isLogin()) {
        deferred.resolve();
    } else {
        deferred.reject();
        $location.url('/login');
    }
    return deferred.promise;
};

简单,就像魅力一样。如果我需要一个指令,我会将这一部分放入服务中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在使用 RouteProvider 在 Angular 中启动路由之前,如何检查登录或其他状态? 的相关文章

  • 使用 Angular JS 调用 Restful API 时的跨域问题

    我正在尝试访问一个宁静的 API 这会产生错误 如何解决这个跨域问题 错误是 Access Control Allow Origin header is present on the requested resource function
  • AngularJS:如何缓存从 $http 调用返回的 json 数据?

    如何缓存从 http 调用返回的 json 数据 我使用以下风格的 http 调用 http url SomeWebMethodUrl method POST data query somevalue headers Content Typ
  • Kendo Angular 多选设置选定值

    我将 Kendo 多重选择与 Angular Kendo 指令和远程数据源一起使用 我试图在应用程序启动时设置所选项目 但没有成功 谁能帮帮我吗 请参阅此处的代码 JS Bin http jsbin com OkukInIc 1 edit
  • 用角度js中的字母过滤列表

    我在表格中显示了一个列表 我需要使用名称的第一个字母来过滤结果 在列表上方我有一个字母 A B C D 等等 单击后 字母列表将按名字过滤 例如 列表详细信息是Apple Boy Bridge点击后A Apple将显示 我必须过滤国家名称以
  • 如何在 AngularJS 中设置选择选项中的文本格式?

    我有以下 json 对象 scope values id 2 code Code 1 name Sample 1 id 4 code Code 2 name Sample 2 id 7 code Code 3 name Sample 3 在
  • TypeScript AngularJS 组件模态 - this.$modalInstance.dismiss 不是一个函数?

    我已将其中一个用户数据输入表单转换为 uib 模式 但是当我尝试从 取消 按钮关闭模式时 出现以下错误 this modalInstance dismiss is not a function 同样的事情是如果使用this modalIns
  • 如何并排展开和折叠三个div?

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • ng-include 跨域帮助 angularjs

    我正在尝试为加载到 ng include 跨域的 url 实现白名单 这是一场噩梦 我有一个在本地运行良好的包含 div div 然后我像这样添加白名单 angular module myApp ngRoute ngResource con
  • 使用最新的不稳定分支生成 Angularjs 应用程序?

    刚开始使用 Yeoman 并喜欢它 但是 我正在构建一个依赖于一些 Angular 1 1 x 功能的应用程序 ng trim and ng animate 并且 Angular generator 使用最新的稳定分支作为默认分支 但不包含
  • getLocationAbsUrl 与 getCurrentUrl

    在量角器中 全球可用browser对象有两个方法 getLocationAbsUrl http angular github io protractor api view Protractor prototype getLocationAb
  • 选择器的内部文本

    我尝试从此标记中获取内部文本 span class ng binding ng scope Displaying results 1 25 of 17 430 span 使用此选择器 document querySelectorAll di
  • Angularjs 模式的复选框表现得很奇怪

    我有一个有角度的应用程序plunker http plnkr co edit rac8w9g8L0eX8mlXKuVn p preview 当我们单击该按钮时 它会打开一个包含项目列表的模式对话框 其中 2 项是根据复选框表输入中的条件进行
  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这
  • Angularjs 手表服务对象

    为什么我无法观看服务中的对象 我有一个简单的变量可以工作 但是一个对象不能工作 http plnkr co edit S4b2g3baS7dwQt3t8XEK p preview http plnkr co edit S4b2g3baS7d
  • 包含routeChangeSuccess的AngularJS测试控制器

    我正在尝试创建单元测试来测试导航列表控制器 但在创建测试时遇到问题 这是控制器的代码 navListModule controller NavListCtrl scope NavList function scope NavList sco
  • 如何销毁角度工厂实例

    一方面 我有几个工厂 每个工厂都控制一个 websocket 另一方面 其中一个工厂应该在客户端登录时启动 因此 if user isLogged injector get NotificationsWebsocket 这就是我动态初始化工
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • $exceptionHandler 中的 $location - 依赖冲突

    我正在尝试实现一个非常标准的任务 当发生异常时 重定向到我的 error page 代码的简化形式如下所示 app factory exceptionHandler location function location return fun
  • 传递给 $resource 的 @id 是什么?

    resource entries id id id update method PUT id是什么 在 资源上doc page http docs angularjs org api ngResource 24resource下面有人这么说

随机推荐