Hola, soy nuevo en angularJS y he estado tratando de evitar el acceso a ciertos estados según los criterios del usuario.
Esto, de las preguntas frecuentes de ui-router, describe exactamente lo que quiero hacer, pero no puedo hacer que funcione correctamente. ¿Qué necesito pero en el objeto de datos exactamente para lograr esto?
(Vi a alguien arrojando "verdadero" en un tutorial de publicación de blog y usándolo como lo he hecho yo, pero eso no parece funcionar porque aparece un error que dice que needAdmin no está definido)
Aquí está mi código:
angular.module('courses').config(['$stateProvider', function($stateProvider) { // Courses state routing $stateProvider. state('listCourses', { url: '/courses', templateUrl: 'modules/courses/views/list-courses.client.view.html' }). state('createCourse', { url: '/courses/create', templateUrl: 'modules/courses/views/create-course.client.view.html', data: { needAdmin: true } }). state('viewCourse', { url: '/courses/:courseId', templateUrl: 'modules/courses/views/view-course.client.view.html' }). state('editCourse', { url: '/courses/:courseId/edit', templateUrl: 'modules/courses/views/edit-course.client.view.html', data: { needAdmin: true } }); } ]); angular.module('courses').run(['$rootScope', '$state', 'Authentication', function($rootScope, $state, Authentication) { $rootScope.$on('$stateChangeStart', function(e, to) { var auth = Authentication; console.log(auth.user.roles[0]); if (to.data.needAdmin && auth.user.roles[0] !== 'admin') { e.preventDefault(); $state.go('/courses'); } }); }]);La mejor manera que he encontrado para hacer esto utiliza resolver:
$stateProvider. state('createCourse', { url: '/courses/create', templateUrl: 'modules/courses/views/create-course.client.view.html', resolve: { security: ['$q', function($q){ if(/*user is not admin*/){ return $q.reject("Not Authorized"); } }] } });Esto activará un error, impidiendo que el usuario acceda a este estado si no está permitido.
Si necesita mostrar un error o enviar al usuario a un estado diferente, maneje el evento $stateChangeError:
$rootScope.$on('$stateChangeError', function(e, toState, toParams, fromState, fromParams, error){ if(error === "Not Authorized"){ $state.go("notAuthorizedPage"); }Si desea verificar el acceso de administrador en todos los estados, puede usar un decorador para agregar la resolución a todos los estados. Algo como esto:
$stateProvider.decorator('data', function(state, parent){ var stateData = parent(state); var data = stateData.data || {}; state.resolve = state.resolve || {}; if(data.needAdmin){ state.resolve.security = ['$q', function($q){ if(/*user is not admin*/){ return $q.reject("Not Authorized"); } }]; return stateData; });Implementé algo como esto para mi aplicación actual. Si el usuario no ha iniciado sesión, lo reenviamos a un formulario de inicio de sesión. Si un usuario que no es administrador intenta acceder a cualquier estado de administrador, lo reenviamos a una página de error.
Si un estado no tiene data , entonces to.data no está definido. Prueba esto:
if (to.data && to.data.needAdmin && auth.user.roles[0] !== 'admin') {