patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webapp: Removed hardcoded info about views which require authentication

Browse Source 
If the return value of a API request equals 401 then the user will be redirected to the login page.
Using this method it's possible to decided within the API if a authentication is needed or not.
This commit is contained in:
Thomas Basler 2022-11-22 20:37:01 +01:00
parent e60619b867
commit a06a8fec3d
15 changed files with 50 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
webapp/src/router/index.ts
View File

@ -103,20 +103,4 @@ const router = createRouter({
] ]
}); });
router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const publicPages = ['/', '/login', '/about', '/info/network', '/info/system', '/info/ntp', '/info/mqtt', ];
const authRequired = !publicPages.includes(to.path);
const loggedIn = localStorage.getItem('user');
if (authRequired && !loggedIn) {
return next({
path: '/login',
query: { returnUrl: to.path }
});
}
next();
});
export default router; export default router;

18
webapp/src/utils/authentication.ts
View File

@ -1,17 +1,19 @@
import type { Emitter, EventType } from "mitt"; import type { Emitter, EventType } from "mitt";
import type { Router } from "vue-router";
export function authHeader(): Headers { export function authHeader(): Headers {
// return authorization header with basic auth credentials // return authorization header with basic auth credentials
let user = JSON.parse(localStorage.getItem('user') || ""); let user = null;
try {
user = JSON.parse(localStorage.getItem('user') || "");
} catch { }
const headers = new Headers();
headers.append('X-Requested-With', 'XMLHttpRequest');
if (user && user.authdata) { if (user && user.authdata) {
const headers = new Headers();
headers.append('Authorization', 'Basic ' + user.authdata); headers.append('Authorization', 'Basic ' + user.authdata);
headers.append('X-Requested-With', 'XMLHttpRequest')
return new Headers(headers);
} else {
return new Headers();
} }
return new Headers(headers);
} }
export function logout() { export function logout() {
@ -47,7 +49,7 @@ export function login(username: String, password: String) {
}); });
} }
export function handleResponse(response: Response, emitter: Emitter<Record<EventType, unknown>>) { export function handleResponse(response: Response, emitter: Emitter<Record<EventType, unknown>>, router: Router) {
return response.text().then(text => { return response.text().then(text => {
const data = text && JSON.parse(text); const data = text && JSON.parse(text);
if (!response.ok) { if (!response.ok) {
@ -55,7 +57,7 @@ export function handleResponse(response: Response, emitter: Emitter<Record<Event
// auto logout if 401 response returned from api // auto logout if 401 response returned from api
logout(); logout();
emitter.emit("logged-out"); emitter.emit("logged-out");
location.reload(); router.push({path: "/login", query: { returnUrl: router.currentRoute.value.fullPath }});
} }
const error = (data && data.message) || response.statusText; const error = (data && data.message) || response.statusText;

2
webapp/src/views/ConfigAdminView.vue
View File

@ -156,7 +156,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

4
webapp/src/views/DtuAdminView.vue
View File

@ -79,7 +79,7 @@ export default defineComponent({
getDtuConfig() { getDtuConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/dtu/config", { headers: authHeader() }) fetch("/api/dtu/config", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(data) => { (data) => {
this.dtuConfigList = data; this.dtuConfigList = data;
@ -98,7 +98,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

24
webapp/src/views/HomeView.vue
View File

@ -463,8 +463,8 @@ export default defineComponent({
isLoggedIn, isLoggedIn,
getInitialData() { getInitialData() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/livedata/status") fetch("/api/livedata/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.liveData = data; this.liveData = data;
this.dataLoading = false; this.dataLoading = false;
@ -526,8 +526,8 @@ export default defineComponent({
}, },
onShowEventlog(serial: number) { onShowEventlog(serial: number) {
this.eventLogLoading = true; this.eventLogLoading = true;
fetch("/api/eventlog/status?inv=" + serial) fetch("/api/eventlog/status?inv=" + serial, { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.eventLogList = data[serial]; this.eventLogList = data[serial];
this.eventLogLoading = false; this.eventLogLoading = false;
@ -540,8 +540,8 @@ export default defineComponent({
}, },
onShowDevInfo(serial: number) { onShowDevInfo(serial: number) {
this.devInfoLoading = true; this.devInfoLoading = true;
fetch("/api/devinfo/status") fetch("/api/devinfo/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.devInfoList = data[serial][0]; this.devInfoList = data[serial][0];
this.devInfoLoading = false; this.devInfoLoading = false;
@ -559,8 +559,8 @@ export default defineComponent({
this.targetLimitTypeText = "Relative (%)"; this.targetLimitTypeText = "Relative (%)";
this.limitSettingLoading = true; this.limitSettingLoading = true;
fetch("/api/limit/status") fetch("/api/limit/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.currentLimitList = data[serial]; this.currentLimitList = data[serial];
this.targetLimitList.serial = serial; this.targetLimitList.serial = serial;
@ -583,7 +583,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
if (response.type == "success") { if (response.type == "success") {
@ -614,8 +614,8 @@ export default defineComponent({
onShowPowerSettings(serial: number) { onShowPowerSettings(serial: number) {
this.powerSettingLoading = true; this.powerSettingLoading = true;
fetch("/api/power/status") fetch("/api/power/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.successCommandPower = data[serial].power_set_status; this.successCommandPower = data[serial].power_set_status;
this.powerSettingSerial = serial; this.powerSettingSerial = serial;
@ -653,7 +653,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
if (response.type == "success") { if (response.type == "success") {

4
webapp/src/views/InverterAdminView.vue
View File

@ -207,7 +207,7 @@ export default defineComponent({
getInverters() { getInverters() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/inverter/list", { headers: authHeader() }) fetch("/api/inverter/list", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.inverters = data.inverter; this.inverters = data.inverter;
this.dataLoading = false; this.dataLoading = false;
@ -222,7 +222,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.getInverters(); this.getInverters();
this.alert = data; this.alert = data;

2
webapp/src/views/MaintenanceRebootView.vue
View File

@ -78,7 +78,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.alertMessage = data.message; this.alertMessage = data.message;
this.alertType = data.type; this.alertType = data.type;

4
webapp/src/views/MqttAdminView.vue
View File

@ -242,7 +242,7 @@ export default defineComponent({
getMqttConfig() { getMqttConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/mqtt/config", { headers: authHeader() }) fetch("/api/mqtt/config", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.mqttConfigList = data; this.mqttConfigList = data;
this.dataLoading = false; this.dataLoading = false;
@ -259,7 +259,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

5
webapp/src/views/MqttInfoView.vue
View File

@ -149,6 +149,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { handleResponse, authHeader } from '@/utils/authentication';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import type { MqttStatus } from '@/types/MqttStatus'; import type { MqttStatus } from '@/types/MqttStatus';
@ -168,8 +169,8 @@ export default defineComponent({
methods: { methods: {
getMqttInfo() { getMqttInfo() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/mqtt/status") fetch("/api/mqtt/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.mqttDataList = data; this.mqttDataList = data;
this.dataLoading = false; this.dataLoading = false;

4
webapp/src/views/NetworkAdminView.vue
View File

@ -128,7 +128,7 @@ export default defineComponent({
getNetworkConfig() { getNetworkConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/network/config", { headers: authHeader() }) fetch("/api/network/config", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.networkConfigList = data; this.networkConfigList = data;
this.dataLoading = false; this.dataLoading = false;
@ -145,7 +145,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

5
webapp/src/views/NetworkInfoView.vue
View File

@ -13,6 +13,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { handleResponse, authHeader } from '@/utils/authentication';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import WifiStationInfo from "@/components/WifiStationInfo.vue"; import WifiStationInfo from "@/components/WifiStationInfo.vue";
import WifiApInfo from "@/components/WifiApInfo.vue"; import WifiApInfo from "@/components/WifiApInfo.vue";
@ -40,8 +41,8 @@ export default defineComponent({
methods: { methods: {
getNetworkInfo() { getNetworkInfo() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/network/status") fetch("/api/network/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.networkDataList = data; this.networkDataList = data;
this.dataLoading = false; this.dataLoading = false;

8
webapp/src/views/NtpAdminView.vue
View File

@ -129,7 +129,7 @@ export default defineComponent({
getNtpConfig() { getNtpConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/ntp/config", { headers: authHeader() }) fetch("/api/ntp/config", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(data) => { (data) => {
this.ntpConfigList = data; this.ntpConfigList = data;
@ -144,7 +144,7 @@ export default defineComponent({
getCurrentTime() { getCurrentTime() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/ntp/time", { headers: authHeader() }) fetch("/api/ntp/time", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(data) => { (data) => {
this.mcuTime = new Date( this.mcuTime = new Date(
@ -172,7 +172,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;
@ -195,7 +195,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

5
webapp/src/views/NtpInfoView.vue
View File

@ -54,6 +54,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { handleResponse, authHeader } from '@/utils/authentication';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import type { NtpStatus } from "@/types/NtpStatus"; import type { NtpStatus } from "@/types/NtpStatus";
@ -73,8 +74,8 @@ export default defineComponent({
methods: { methods: {
getNtpInfo() { getNtpInfo() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/ntp/status") fetch("/api/ntp/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.ntpDataList = data; this.ntpDataList = data;
this.dataLoading = false; this.dataLoading = false;

4
webapp/src/views/SecurityAdminView.vue
View File

@ -67,7 +67,7 @@ export default defineComponent({
getPasswordConfig() { getPasswordConfig() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/security/password", { headers: authHeader() }) fetch("/api/security/password", { headers: authHeader() })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(data) => { (data) => {
this.securityConfigList = data; this.securityConfigList = data;
@ -94,7 +94,7 @@ export default defineComponent({
headers: authHeader(), headers: authHeader(),
body: formData, body: formData,
}) })
.then((response) => handleResponse(response, this.$emitter)) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then( .then(
(response) => { (response) => {
this.alertMessage = response.message; this.alertMessage = response.message;

5
webapp/src/views/SystemInfoView.vue
View File

@ -13,6 +13,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { handleResponse, authHeader } from '@/utils/authentication';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import HardwareInfo from "@/components/HardwareInfo.vue"; import HardwareInfo from "@/components/HardwareInfo.vue";
import FirmwareInfo from "@/components/FirmwareInfo.vue"; import FirmwareInfo from "@/components/FirmwareInfo.vue";
@ -40,8 +41,8 @@ export default defineComponent({
methods: { methods: {
getSystemInfo() { getSystemInfo() {
this.dataLoading = true; this.dataLoading = true;
fetch("/api/system/status") fetch("/api/system/status", { headers: authHeader() })
.then((response) => response.json()) .then((response) => handleResponse(response, this.$emitter, this.$router))
.then((data) => { .then((data) => {
this.systemDataList = data; this.systemDataList = data;
this.dataLoading = false; this.dataLoading = false;