1
私はgitで撮影したAngular web appテンプレートで作業しています。ユーザーが権限を持っているかどうかを検証する機能はわかりません。ではない？私の目標は、ログインする機能を持つことです。応答を取り、トークンを保存します。 $状態が変わったら、まだトークンがあるかどうか確認してください。どのようにできるのか？アジャスターでのチェックアクセスの承認
のCore.js：
'use strict';
angular.module('app.core').controller('App', ['config', '$scope', '$state', '$rootScope', 'shortHistory','session', '$window', 'authorize', function(config, $scope, $state, $rootScope, shortHistory, session, $window, 'authorize') {
var vm = this;
vm.title = config.appTitle;
$scope.app = config;
$scope.$state = $state;
vm.currentUser = null;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
authorize.checkAccess(event, toState, toParams);
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
$('body').toggleClass('nav-shown', false);
});
$rootScope.$on('$userSet', function(event, user) {
vm.currentUser = user;
$window.localStorage.setItem('token', vm.currentUser.token);
});
shortHistory.init($scope);
}]);
common.js：
(function() {
'use strict';
angular.module('app.common')
.service('shortHistory', shortHistory)
.service('session', session)
// .service('authorize', authorize)
.service('authenticationService', authenticationService);
shortHistory.$inject = ['$state'];
function shortHistory($state) {
var history = this;
function setItem(what, state, params) {
history[what] = {
state: state,
params: params
};
}
this.init = function(scope) {
scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
setItem('from', fromState, fromParams);
setItem('to', toState, toParams);
});
};
this.goTo = function(where) {
$state.go(history[where].state.name, history[where].params)
};
}
session.$inject = ['$http', '$q', '$rootScope'];
function session($http, $q, $rootScope) {
var session = this;
this.fetchCurrentUser = function(url) {
var userFetch;
if (session.getCurrentUser()) {
userFetch = $q(function(resolve) {
resolve(session.getCurrentUser());
});
} else {
userFetch = $http.get(url);
}
return userFetch;
};
this.getCurrentUser = function() {
return this.user;
};
this.setCurrentUser = function(user) {
this.user = user;
$rootScope.$broadcast('$userSet', this.user);
};
}
/* THIS IS THE CODE THAT I'VE NOT TOUCHED, IT WAS IN THE TEMPLATE
authorize.$inject = ['session', '$state', '$urlRouter', '$rootScope'];
function authorize(session, $state, $rootScope) {
this.checkAccess = function(event, toState, toParams) {
if (!session.getCurrentUser() && !(toState.data && toState.data.noAuth)) {
event.preventDefault();
session.fetchCurrentUser('api/sers')
.success(function(user) {
session.setCurrentUser(user);
$state.go(toState.name, toParams);
})
.error(function() {
$state.go('login');
});
}
};
}
*/
authenticationService.$inject = ['$http', '$rootScope', 'session', '$state'];
function authenticationService($http, $rootScope, session) {
var vm = this;
vm.loginError = '';
this.login = function(user) {
var userData = {
email: user.email,
password: user.password
}
return $http.post('api/login/', userData)
.success(function(data) {
var loggedUser = jQuery.extend(data, userData);
session.setCurrentUser(loggedUser);
$rootScope.$broadcast('$userLoggedIn');
});
};
var token = localStorage.getItem('token');
this.logout = function() {
return $http.post('api/logout/', token)
.success(function(data) {
session.setCurrentUser(null);
$rootScope.$broadcast('$userLoggedOut');
});
}
}
})();
Auth.js：
(function() {
'use strict';
angular.module('app.profile')
.controller('LoginController', loginController)
.run(runAuth);
loginController.$inject = ['authenticationService'];
function loginController(
authenticationService
) {
var vm = this;
vm.user = {};
vm.loginError = '';
this.login = function() {
authenticationService.login(vm.user)
.then(null, function(err) {
vm.loginError = err.data.result;
});
};
}
runAuth.$inject = ['$rootScope', '$state', 'authenticationService'];
function runAuth($rootScope, $state, authenticationService) {
$rootScope.logout = authenticationService.logout;
$rootScope.$on('$userLoggedIn', function() {
$state.go('app.dashboard');
});
$rootScope.$on('$userLoggedOut', function() {
$state.go('login');
});
}
})();
profile.module.js：
これはコードであります'use strict';
angular.module（ 'app.profile'、[ 'ui.router']）
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('login', {
url: '/login',
data: {
noAuth: true
},
templateUrl: 'app/modules/profile/auth/login.html',
controller: 'LoginController',
controllerAs: 'vm'
})
.state('app.profile', {
url: '/profile',
templateUrl: 'app/modules/profile/edit/edit.html',
controller: 'ProfileController',
controllerAs: 'vm'
});
}]);
元のプロジェクトはこれです：私は、認証がどのように機能するかを理解することはできませんhttps://github.com/flatlogic/angular-dashboard-seed 、どこで挿入します認証のためのコントローラ。たとえば、今はログインできませんがログアウトはできません。トークンがない場合でも、/ dashboardに正しく移動できますが、/ profileはログに記録されたユーザーだけが表示する必要があります。