简单的角度身份验证

Simple Angular authentication

本文关键字：身份验证 简单      更新时间：2023-12-24

我正试图将本文中描述的小型身份验证应用程序变成一个工作示例，大致类似于这个ember版本。

将文章片段连接在一起，可以得出以下结论：

// app.js
app.config(function ($httpProvider) {
  $httpProvider.interceptors.push(function ($timeout, $q, $injector) {
    var loginModal, $http, $state;
    // this trick must be done so that we don't receive
    // `Uncaught Error: [$injector:cdep] Circular dependency found`
    $timeout(function () {
      loginModal = $injector.get('loginModal');
      $http = $injector.get('$http');
      $state = $injector.get('$state');
    });
    return {
      responseError: function (rejection) {
        if (rejection.status !== 401) {
          return rejection;
        }
        var deferred = $q.defer();
        loginModal()
          .then(function () {
            deferred.resolve( $http(rejection.config) );
          })
          .catch(function () {
            $state.go('welcome');
            deferred.reject(rejection);
          });
        return deferred.promise;
      }
    };
  });
});
// LoginModalCtrl.js
app.controller('LoginModalCtrl', function ($scope, UsersApi) {
  this.cancel = $scope.$dismiss;
  this.submit = function (email, password) {
    UsersApi.login(email, password).then(function (user) {
      $scope.$close(user);
    });
  };
});
// loginModal.js
app.service('loginModal', function ($modal, $rootScope) {
  function assignCurrentUser (user) {
    $rootScope.currentUser = user;
    return user;
  }
  return function() {
    var instance = $modal.open({
      templateUrl: 'views/loginModalTemplate.html',
      controller: 'LoginModalCtrl',
      controllerAs: 'LoginModalCtrl'
    });
    return instance.result.then(assignCurrentUser);
  };
});
// routes.js
app.config(function ($stateProvider) {
  $stateProvider
    .state('welcome', {
      url: '/welcome',
      // ...
      data: {
        requireLogin: false
      }
    })
    .state('app', {
      abstract: true,
      // ...
      data: {
        requireLogin: true // this property will apply to all children of 'app'
      }
    })
    .state('app.dashboard', {
      // child state of `app`
      // requireLogin === true
    });
});

然而，我不知道如何正确地实例化app，也不知道在HTML中包含什么，或者如何为Angular识别它。

这是我从上面的代码开始的JSbin，我在其中添加了以下内容：

  • html标签的ng-app="authApp"属性
  • 包含原作者形式的ng-controller="LoginModalCtrl" div
  • JS顶部的CCD_ 6

控制台在吐错误，我不明白。有人能告诉我如何将Angular应用程序变为现实吗？

tldr

你的第一行应该是

var app = angular.module("authApp", ['ui.router']);

您需要下载并包含UI路由器模块，其中包含以下内容：

<script src="app/js/angular-ui/angular-ui-router.min.js"></script>

更多详细信息：

JSbin上出现的第一个控制台错误：

Error: [$injector:unpr] Unknown provider: $stateProvider

建议您在angular不知道$stateProvider是什么的地方调用$stateProvider。$stateProvider来自angular UI Router模块。你需要在你的应用程序中包含该模块，才能直接调用它。

您需要下载UI路由器模块(https://github.com/angular-ui/ui-router)，用类似的东西将其加载到html文件中

  <script src="app/js/angular-ui/angular-ui-router.min.js"></script>

然后通过将第一行更改为来将模块包含在应用程序中

var app = angular.module("authApp", [
    'ui.router',
]);

这将消除你的第一个错误。看起来在那之后你会有更多的错误，UsersApi并没有被定义为wickY26提到的。

相关文章：