Angular - UI路由器 - 控制对状态和重定向的访问

时间:2016-07-20 09:41:59

标签: angularjs redirect angularjs-rootscope

我开发了一个带有身份验证过程的网站。用户可以是管理员也可以不是。 我写了不同的组件和不同的状态来路由用户。

我已经控制了HTTP请求来处理身份验证过程,但是当简单用户尝试通过输入地址转到非授权页面时,我想强制重定向。

实施例

他输入了admin url:

enter image description here

我想将此用户重定向到他来自的页面,或强迫他留在当前页面...

我尝试做这样的事情: www.seanmarchetti.com/authentication_with_angularui_router.html

但我有一个不同的项目结构

enter image description here

我控制对" admin"中的状态的访问权限,我想使用$state.go,但是要使用非管理员状态.. 我尝试使用toState但是没有工作(或者我可能不理解如何正确使用它)

以下是admin.router.js的代码:

'use strict';

angular.module('appModule.admin')
  .config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.when('/admin', '/admin/users');

    $stateProvider
      .state('admin', {
        url: '/admin',
        redirectTo: 'admin.users',
        template: '<admin></admin>',
        needAdmin: true,
      })
      .state('admin.users', {
        url: '/users',
        template: '<users></users>',
        needAdmin: true,
      })
      .state('admin.apis', {
        url: '/apis',
        template: '<engines></engines>',
        needAdmin: true,
      })

  })
  .run(function ($rootScope, $state, Auth) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
      if (toState.needAdmin && !Auth.isAdmin()) {
        console.log('fromstate', fromState);
        console.log('tostate', toState);
        $state.go('/*UNKNOWN  STATE FROM HERE*/');
        event.preventDefault();
      }
    });
  });

任何人都可以帮助我如何将用户从.state unknown正确地重定向到admin

1 个答案:

答案 0 :(得分:0)

你刚刚为解决状态编写了反模式。

请使用resolve https://github.com/angular-ui/ui-router/wiki#resolve中的ui-router媒体资源。

如果您的支票通过(状态将被解决),您应该function needAdmin() { return Promise (...) //or $q.deffer.promise } resolve(true);如果您的支票失败,则reject(); $state.go(...)reject()

resolve()将自动阻止您的状态立即解析(没有任何承诺等待在内存中解析以避免内存泄漏)。

// somewhere in your AuthFactory AuthFactory.isAdmin () { var deferred = $q.defer(); if (AuthFactory.isAdmin === true) { deffered.resolve(true); } else { deffered.reject('Not an admin'); $state.go('...'); } return deferred.promise; }只允许解析(访问)状态。

简单示例:

// in your configuration
$stateProvider
  .state('admin', {
    url: '/admin',
  
    ...
  
    resolve: {
      checkAdminBeforeAccessing: function (AuthFactory) {
        return AuthFactory.isAdmin();
      }
    }
  })
  .state('anotherStateNeedAdmin', {
    url: '/another',
  
    ...
  
    resolve: {
      checkAdminBeforeAccessing: function (AuthFactory) {
        return AuthFactory.isAdmin();
      }
    }
acc