worldskills / angular-worldskills-utils
v0.3.1
2024-05-28 11:41 UTC
Requires
README
安装
使用Bower安装
bower install angular-worldskills-utils --save
在HTML文件中加载JavaScript
<script src="bower_components/angular-worldskills-utils/src/angular-worldskills-utils.js"></script>
用法
将依赖添加到AngularJS模块中
angular.module('yourApp', ['worldskills.utils']);
定义以下常量(别忘了替换你的客户端ID)
angular.module('yourApp').constant('WORLDSKILLS_CLIENT_ID', '<your client id>'); angular.module('yourApp').constant('WORLDSKILLS_API_AUTH', 'https://api.worldskills.org/auth'); angular.module('yourApp').constant('WORLDSKILLS_AUTHORIZE_URL', 'https://auth.worldskills.org/oauth/authorize'); angular.module('yourApp').constant('LOAD_CHILD_ENTITY_ROLES', false); angular.module('yourApp').constant('FILTER_AUTH_ROLES', [<array of application codes>]);
身份验证
要使用以下任何身份验证函数,请确保在至少一个控制器中使用auth
对象,例如:
angular.module('yourApp').controller('ContainerCtrl', function($scope, auth) { $scope.auth = auth; });
返回到状态
在用户在WorldSkills Auth上登录后加载上一个状态,可以使用sessionStorage.getItem('redirect_to_state')
。配置$urlRouterProvider
如下:
angular.module('yourApp').config(function($urlRouterProvider) { $urlRouterProvider.otherwise(function ($injector, $location) { // check for existing redirect var $state = $injector.get('$state'); var redirectToState = sessionStorage.getItem('redirect_to_state'); var redirectToParams = sessionStorage.getItem('redirect_to_params'); sessionStorage.removeItem('redirect_to_state'); sessionStorage.removeItem('redirect_to_params'); if (redirectToState) { if (redirectToParams) { redirectToParams = angular.fromJson(redirectToParams); } else { redirectToParams = {}; } $state.go(redirectToState, redirectToParams); } else { $state.go('your.home.state'); } }); });
需要认证用户
要为某些状态要求认证用户,请在状态数据中添加requireLoggedIn: true
.state('your.state', { url: '/your/url', templateUrl: 'views/template.html', controller: 'YourCtrl', data: { requireLoggedIn: true } })
您还可以使用requiredRoles
为状态要求特定角色
.state('your.state', { url: '/your/url', templateUrl: 'views/template.html', controller: 'YourCtrl', data: { requireLoggedIn: true, requiredRoles: [ {code: 100, role: 'Admin'} ] } })
禁止状态的自定义回退
为了手动处理禁止重定向而不是自动重定向到登录URL,请将forbiddenFallback: function
添加到app.js
.state('people', { url: '/people?search', templateUrl: 'views/people.html', controller: 'PersonnelCtrl', data:{ requireLoggedIn: true, forbiddenCallback: function(auth, $state){ //state passed from $rootScope.$state $state.go('person.view', {'pid': auth.user.person_id}); }, requiredRoles: [ {code: 600, role: APP_ROLES.ADMIN}, {code: 600, role: APP_ROLES.MANAGER} ] } })
现在还允许为登录错误状态提供自定义回退,用例:重定向到注册页面而不是auth.loginUrl
.state('restrictedState', { url: '/needsLogin', templateUrl: 'views/restricted.html', controller: 'RestrictedCtrl', data: { requireLoggedIn: true, unAuthenticatedCallback: function(auth, $state){ $state.go('signup'); }, requiredRoles: [ {code: 1800, role: APP_ROLES.ADMIN}, {code: 1800, role: APP_ROLES.MANAGER}, {code: 1800, role: APP_ROLES.USER} ] } }) .state('signup', { url: '/signup', controller: 'SignupCtrl', templateUrl: 'views/signup.html', data: { requireLoggedIn: false } })
旋转器指令
显示一个动画的加载指示器图形。
<ws-spinner ng=show="loading"></ws-spinner>
文本旋转器指令
在按钮上显示加载指示器。
<button type="submit" class="btn btn-success"> Save <ws-text-spinner ng-show="loading" class="ng-hide"></ws-text-spinner> </button>
旋转器大小
添加了小号和大号版本
<ws-spinner class='bigSpinner'></ws-spinner> <ws-spinner class='smallSpinner'></ws-spinner>