diff --git a/docs/configuration.md b/docs/configuration.md index bb41948..a4da08b 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -25,7 +25,8 @@ header: true # Set to false to hide the header footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it. columns: "3" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12) -connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example) +connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example). + # You should set it to true when using an authentication proxy, it also reloads the page when a redirection is detected when checking connectivity. # Optional: Proxy / hosting option proxy: diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 649e5a6..10d6c2d 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -17,3 +17,9 @@ To resolve this, you can either: * Host all your target service under the same domain & port. * Modify the target server configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it. * Use a cors proxy server like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others. + +## I am using an authentication proxy and homer says I am offline + +This should be a configuration issue. +* Make sure the option `connectivityCheck` is set to `true` in configuration. +* Check your proxy configuration, the expected behavior is to redirect user using a 302 to the login page when user is not authenticated. diff --git a/src/App.vue b/src/App.vue index c58fca1..664867f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -231,13 +231,7 @@ export default { }, getConfig: function (path = "assets/config.yml") { return fetch(path).then((response) => { - if (response.redirected) { - // This allows to work with authentication proxies. - window.location.href = response.url; - return; - } - - if (response.status == 404) { + if (response.status == 404 || response.redirected) { this.configNotFound = true; return {}; } diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index 02cbd7f..f2be652 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -17,6 +17,9 @@ export default { }; }, created: function () { + if (/t=\d+/.test(window.location.href)) { + window.history.replaceState({}, document.title, window.location.pathname); + } let that = this; this.checkOffline(); @@ -29,15 +32,41 @@ export default { }, false ); + window.addEventListener( + "online", + function () { + that.checkOffline(); + }, + false + ); + window.addEventListener( + "offline", + function () { + this.offline = true; + }, + false + ); }, methods: { checkOffline: function () { + if (!navigator.onLine) { + this.offline = true; + return; + } + + // extra check to make sure we're not offline let that = this; - return fetch(window.location.href + "?alive", { + const aliveCheckUrl = window.location.href + "?t="+(new Date().valueOf()); + return fetch(aliveCheckUrl, { method: "HEAD", cache: "no-store", + redirect: "manual" }) .then(function (response) { + // opaqueredirect means request has been redirected, to auth provider probably + if ((response.type === "opaqueredirect" && !response.ok) || [401, 403].indexOf(response.status) != -1) { + window.location.href = aliveCheckUrl; + } that.offline = !response.ok; }) .catch(function () { diff --git a/vue.config.js b/vue.config.js index 410acc8..1645c2f 100644 --- a/vue.config.js +++ b/vue.config.js @@ -26,4 +26,7 @@ module.exports = { msTileImage: "assets/icons/icon-any.png", }, }, + devServer: { + disableHostCheck: true + }, };