AngularJS 1x 中的最佳实践认证与 ui 路由器

Question

我有一个有效的角度代码来成功获取/存储/检索 jwt 令牌以进行身份​​验证。

我还得到了以下路由控制器：

// Router configuration
App.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/dashboard');
        $stateProvider
            .state('dashboard', {
                url: '/dashboard',
                templateUrl: 'assets/views/dashboard.html'
            })
            .state('customers', {enter code here
                url: '/customers',
                templateUrl: 'assets/views/customers.html'
            })
            .state('customersAdd', {
                url: '/customers/add',
                templateUrl: 'assets/views/customers_add.html'
            })
            .state('account', {
                url: '/account',
                templateUrl: 'assets/views/account.html'
            })
            .state('login', {
                url: '/login',
                templateUrl: 'assets/views/login.html'
            });
    }
]);

我在网上浏览了不同的教程，我认为，根据我的理解，最好的方法是在我的路线上使用 resolve。然而，我不知道如何将这些碎片拼凑在一起。我得到了一个有效的身份验证服务，其函数 auth.isAuth() 返回 true 或 false。

但是我怎样才能将它绑定到我的路由中呢？而且我还想明确标记不需要 auth.isAuth() 为真的路由，因为只有两种状态不需要经过身份验证的用户。

问候 eXe

Answer 1

以防万一有人在寻找相同的东西，这是我的最终解决方案：

// Router configuration
App.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/dashboard');
        $stateProvider
            .state('auth', {
                url: '',
                abstract: true,
                resolve: {
                  loginRequired: loginRequired
                },
            })
            .state('auth.dashboard', {
                url: '/dashboard',
                templateUrl: 'assets/views/dashboard.html'
            })
            .state('auth.customers', {
                url: '/customers',
                templateUrl: 'assets/views/customers.html'
            })
            .state('auth.customersAdd', {
                url: '/customers/add',
                templateUrl: 'assets/views/customers_add.html'
            })
            .state('auth.account', {
                url: '/account',
                templateUrl: 'assets/views/account.html'
            })
            .state('login', {
                url: '/login',
                templateUrl: 'assets/views/login.html'
            });
    }
]);

function loginRequired($q, $location, auth) {
    var deferred = $q.defer();
        if (auth.isAuthed()) {
        deferred.resolve();
    } else {
        $location.path('/login');
    }
    return deferred.promise;
}

通过使用嵌套状态，我的“身份验证”状态就像一个中间件。现在我可以轻松管理我的路线了。

Answer 2

这是我的做法。从卫星图书馆借来的。效果很好！

//note the resolve block.
$stateProvider
  .state('home', {
    url: '/home',
    controller: 'HomeCtrl',
    templateUrl: 'views/home.html',
    data: {
      pageTitle: 'Home'
    },
    resolve: {
      loginRequired: loginRequired
    }
  })
  .state('splash', {
    url: '/',
    templateUrl: 'views/auth/splash.html',
    controller: 'SplashCtrl',
    data: {
      pageTitle: 'Welcome'
    },
    resolve: {
      skipIfLoggedIn: skipIfLoggedIn
    }
  })

//add to your apps config block, below your route definitions
function skipIfLoggedIn($q, auth) {
  var deferred = $q.defer();
  if (auth.isAuth()) {
    deferred.reject();
  } else {
    deferred.resolve();
  }
  return deferred.promise;
}

function loginRequired($q, $location, auth) {
    var deferred = $q.defer();
    if (auth.isAuth()) {
      deferred.resolve();
    } else {
      $location.path('/');
    }
    return deferred.promise;
  }