没有调用Angular登录/注销功能

时间:2017-02-09 17:39:30

标签: javascript angularjs authentication

我正在使用带有JWT令牌的angular来验证用户。

但我遇到的问题是login()被分配给$scope的问题未被调用。任何帮助将不胜感激。

app.js档案

var admin = angular.module('admin',['admin.core','admin.auth']);
angular.module('admin.core', ['ui.router','satellizer','ngResource','ngAnimate',
'ngStorage']);

admin.config(function($httpProvider, $stateProvider, $urlRouterProvider, 
$authProvider, $provide, $locationProvider) {
     $authProvider.loginUrl = '/api/authenticate';
$urlRouterProvider.otherwise('/login');

$locationProvider.html5Mode(true);

$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: '/partials/admin/login.html',
        title : 'Admin Login'
    })
});

angular.module("admin.auth", []).controller("AuthController",AuthController);
function AuthController($auth, $state, $http, $rootScope, $scope) {
  console.log("Auth Called");
   $scope.email='';
   $scope.password='';
   $scope.newUser={};
   $scope.loginError=false;
   $scope.loginErrorText='';

   $scope.login = function() {

    var credentials = {
        email: $scope.email,
        password: $scope.password
    }

    $auth.login(credentials).then(function() {
        return $http.get('/api/authenticate/user');
    }, function(error) {
        $scope.loginError = true;
        $scope.loginErrorText = error.data.error;
    }).then(function(response) {
        if(typeof response != "undefined"){
          var user = JSON.stringify(response.data.user);
          localStorage.setItem('user', user);
          $rootScope.authenticated = true;
          $rootScope.currentUser = response.data.user;
          $scope.loginError = false;
          $scope.loginErrorText = '';
          $state.go('dashboard');
        }
    });
}

   $scope.logout = function() {
    $auth.logout().then(function() {
        // Remove the authenticated user from local storage
        localStorage.removeItem('user');
        // Flip authenticated to false so that we no longer
        // show UI elements dependant on the user being logged in
        $rootScope.authenticated = false;
        // Remove the current user info from rootscope
        $rootScope.currentUser = null;
        $state.go('login');
    });
}
}

我正在尝试使用AuthConrtoller之类的

 <body ng-controller="AuthController">
     <ui-view></ui-view>
 </body>

login.html

<form name="loginForm" autocomplete="off" novalidate>
    <md-input-container class="md-block">
    <label for="email">Username</label>
     <input type="text" name="email" required="required" ng-model="email" md-no-asterisk/>
     <div ng-messages="loginForm.email.$error" role="alert">
        <div ng-message="required">Username is required</div>
      </div>
     </md-input-container>
      <md-input-container class="md-block">
        <label for="password">Password</label>
        <input type="password" name="password" required="required" ng-model="password" md-no-asterisk/>
        <div ng-messages="loginForm.password.$error" role="alert">
            <div ng-message="required">Password can not be blank</div>
        </div>
     </md-input-container>
      <md-button type="submit" class="md-primary md-raised" ng-disabled="!loginForm.$valid" ng-click="login()">Login</md-button>
</form>

1 个答案:

答案 0 :(得分:1)

您需要在路由配置中添加控制器,

$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: '/partials/admin/login.html',
        controller : 'AuthController',
        title : 'Admin Login'
    })
});

您可以使用服务处理登录/注销功能,并调用各种控制器内的功能。

<强>样本

&#13;
&#13;
var app = angular.module('app', []);
app.controller('loginController',['$scope', 'MyUser',function($scope, MyUser)
{
    $scope.isloggedin = MyUser.getStatus();
    alert($scope.isloggedin);
}]);
app.service('MyUser', [function($scope) {
  this.loggedIn = false;
  return {
    getStatus: function() {
       this.loggedIn = true;
       return this.loggedIn;
    }
  }
}]);
&#13;
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body ng-app="app" ng-controller="loginController">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>   
</body>
</html>
&#13;
&#13;
&#13;