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

【问题标题】：Angular - UI Router - control access to state and redirectAngular - UI 路由器 - 控制对状态和重定向的访问
【发布时间】：2016-11-23 11:31:03
【问题描述】：

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

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

示例

他输入管理员网址：

我想将此用户重定向到他来自的页面，或者强制他停留在当前页面...

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

但我有不同的项目结构

我在“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();
      }
    });
  });

谁能帮助我如何将用户从admin正确重定向到.state unknown？

【问题讨论】：

标签： angularjs redirect angularjs-rootscope

【解决方案1】：

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

请使用来自ui-router 的resolve 属性：https://github.com/angular-ui/ui-router/wiki#resolve。

你应该有一个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();
      }
    }

【讨论】：