angularjs - stateparams - ui router ui sref

UI Router conditional ui views?

Question

No puedo encontrar una manera razonable, que no parezca un truco, para resolver este problema bastante trivial.

Quiero que un invitado vea una página de bienvenida cuando accede al índice del sitio web y un usuario conectado para ver su perfil, y cada página tiene su propia plantilla y controlador. Idealmente, habría dos estados para una url , y de alguna manera sería capaz de alterar automáticamente la activa dependiendo del estado de inicio de sesión. Ambas vistas tendrán sus propias vistas anidadas, por lo que ng-include no se puede usar (supongo).

Soy bastante nuevo en el enrutador angular y ui y creo que podría pasar por alto una solución fácil al problema.

¿Podría hacerse con vistas nombradas y ng-show?

Answer 1

El templateUrl puede ser una función para que pueda verificar el estado de inicio de sesión y devolver una vista diferente y definir el controlador en la vista en lugar de como parte de la configuración de estado

Answer 2

En cualquier lugar (probablemente en algún controlador de alto nivel) deberías poder vincular un evento ''$routeChangeStart'' al $rootScope y hacer tu verificación:

$rootScope.$on(''$routeChangeStart'', function(next, current){
if(next != ''/login'' && !userLoggedIn){
$location.path( "/login" );
}
});

Esto se activará cada vez que se establezca una nueva ruta, incluso en la primera visita a la página.

Answer 3

En mi caso, si dos estados pueden compartir la lógica del mismo controlador, la plantilla condicional es una buena opción. De lo contrario, crear estados separados es una buena opción.

Answer 4

Mi solución:

angular.module(''myApp'')
.config(function ($stateProvider) {
$stateProvider
.state(''main'', {
url: ''/'',
controller: function (Auth, $state) {
if (someCondition) {
$state.go(''state1'');
} else {
$state.go(''state2'');
}
}
});
});

donde el estado 1 y el estado 2 están definidos en otra parte.

Answer 5

Para los fines de los documentos, utilicé:

$rootScope.$on(''$stateChangeStart'', function(event, toState) {
if ((toState.name !== ''login'') && (!$localStorage.nickname)) {
event.preventDefault();
$state.go(''login'');
}
});

Usar $routeChangeStart no funcionó para mí.

Answer 6

Si entiendo la pregunta; desea asegurarse de que el usuario que no ha iniciado sesión no puede ver una página que requiere iniciar sesión. ¿Es correcto?

Lo he hecho con un código como este dentro de un controlador:

if(!''some condition that determines if user has access to a page''){
$location.path( "/login" );
}

Answer 7

Se usa para mi vista condicional en ui-route

$stateProvider.state(''dashboard.home'', {
url: ''/dashboard'',
controller: ''MainCtrl'',
// templateUrl: $rootScope.active_admin_template,
templateProvider: [''$stateParams'', ''$templateRequest'',''$rootScope'', function ($stateParams, templateRequest,$rootScope) {
var templateUrl ='''';
if ($rootScope.current_user.role == ''MANAGER''){
templateUrl =''views/manager_portal/dashboard.html'';
}else{
templateUrl =''views/dashboard/home.html'';
}
return templateRequest(templateUrl);
}]
});

Answer 8

Si está utilizando el enrutador UI, solo cree tres estados: el estado raíz, con la URL ''/'' y dos estados descendientes directos sin URL. En la onEnter del estado raíz, usted detecta el estado del usuario y la transición al estado secundario correcto en consecuencia. Esto da la apariencia de mantener el mismo URL para ambos estados secundarios, pero le permite separar estados con configuraciones separadas.