change - El modo HTML5 de AngularJS se degradó a recargas de página completa en lugar de hashbang

ng src angular 6

Question

Al habilitar el modo HTML5 en AngularJS, el servicio $location reescribirá las URL para eliminar el hashbang de ellos. Esta es una gran característica que me ayudará con mi aplicación, pero hay un problema con su retroceso al modo hashbang. Mi servicio requiere autenticación y me veo obligado a usar un mecanismo de autenticación externo desde mi aplicación. Si un usuario intenta ir a una URL para mi aplicación con un hashbang, primero los redireccionará a la página de autenticación (nunca tocará mi servicio a menos que se autentique correctamente) y luego los redireccionará a mi aplicación. Dado que la etiqueta hash solo se ve desde el lado del cliente, dejará fuera cualquier parte de las rutas después de que lleguen a mi servidor. Una vez que se autentican, pueden volver a ingresar la URL y funcionará, pero es la primera vez que causará una interrupción en la experiencia del usuario.

Mi pregunta es entonces, ¿hay alguna manera de pasar de $location.html5Mode(true) al repliegue de recargas de página completa para navegadores no compatibles, omitiendo el método hashbang de enrutamiento completamente en AngularJS?

La mejor comparación de las implementaciones disponibles de lo que estoy buscando sería algo como navegar por las carpetas en github.com. Si el navegador admite la reescritura de la URL sin iniciar una actualización de la página, la página cargará de forma asíncrona las partes necesarias. Si el navegador no lo admite, cuando un usuario hace clic en una carpeta, se produce una actualización de página completa. ¿Se puede lograr esto con AngularJS en lugar de usar el modo hashbang?

Answer 1

¿Por qué no manejar la redirección no autenticada en el lado del cliente para esta situación? Necesitaría saber un poco más sobre cómo funciona exactamente tu aplicación para darte una solución más específica, pero esencialmente algo como:

1. El usuario va a una ruta manejada por AngularJS, el servidor sirve la plantilla principal de AngularJS y javascript
2. El usuario no está autenticado, AngularJS lo detecta y lo redirige a la página de autenticación

Podría tener algo en el bloque de ejecución del módulo para cuando se inicie la aplicación AngularJS:

module(''app'',[])
.configure(...yadda...yadda...yadda...)
.run([''$location'', ''authenticationService'', function($location, auth) {
if (!auth.isAuthenticated()) {
$location.url(authenticationUrl)
}
});

He incluido un servicio que descubriría si se autentificara de alguna manera, según usted, cómo podría estar revisando una cookie de sesión, podría estar presionando su API para preguntar. Realmente depende de cómo desea continuar verificando la autenticación a medida que se ejecuta la aplicación cliente.

Answer 2

Intente ajustar la configuración de $ location y $ routeProvider en la comprobación de la API del historial HTML5 del navegador, de esta forma:

if (isBrowserSupportsHistoryAPI()) {
$location.html5Mode(true)
$routeProvider.when(...);
}

También puede ser que necesite crear un contenedor a $ location si lo usa para cambiar la ruta. (Perdón por el terrible inglés)

Answer 3

NO sobrescriba la funcionalidad del núcleo.

Use Modernizr, haga la detección de características, y luego proceda en consecuencia

compruebe el historial de compatibilidad con API

if (Modernizr.history) {
// history management works!
} else {
// no history support :(
// fall back to a scripted solution like History.js
}

Answer 4

Puede probar y anular la funcionalidad del servicio $ location. La idea general sería volver a escribir la URL según si alguien ya está autenticado o simplemente usar un enfoque único (sin hashbangs) para todas las URL, independientemente de si html5mode está activado o no.

No estoy seguro de entender el caso de uso por lo que no puedo escribir el código exacto que necesita. Aquí hay una implementación de ejemplo de cómo anular / implementar y registrar el servicio $ location, solo asegurándose de que siempre se elimine el hashbang:

app.service(''$location'', [function() {
var DEFAULT_PORTS = {
ftp: 21,
http: 80,
https: 443
};
angular.extend(this, {
absUrl: function() {
return location.href;
},
hash: function(hash) {
return location.hash.substr(1);
},
host: function() {
return location.host;
},
path: function(path) {
if (!path) {
return location.pathname;
}
location.pathname = path;
return this;
},
port: function() {
return location.port ? Number(location.port) : DEFAULT_PORTS[this.protocol()] || null;
},
protocol: function() {
return location.protocol.substr(0, location.protocol.length - 1);
},
replace: function() {
return this;
},
search: function(search, paramValue) {
if (search || paramValue) {
return this;
}
var query = {};
location.search.substr(1).split("&").forEach(function(pair) {
pair = pair.split("="); query[pair[0]] = decodeURIComponent(pair[1]);
});
return query;
},
url: function(url, replace) {
return this.path();
}
});
}]);