refactor(frontend): Algemene linting fouten
This commit is contained in:
parent
8efce6bee0
commit
dd1000c662
9 changed files with 26 additions and 25 deletions
|
@ -29,11 +29,11 @@
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Logic to change the language of the website to the selected language
|
// Logic to change the language of the website to the selected language
|
||||||
const changeLanguage = (langCode: string) => {
|
function changeLanguage(langCode: string): void {
|
||||||
locale.value = langCode;
|
locale.value = langCode;
|
||||||
localStorage.setItem("user-lang", langCode);
|
localStorage.setItem("user-lang", langCode);
|
||||||
console.log(langCode);
|
console.log(langCode);
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -20,13 +20,13 @@ const router = createRouter({
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "home",
|
name: "home",
|
||||||
component: () => import("../views/HomePage.vue"),
|
component: async (): Promise<unknown> => import("../views/HomePage.vue"),
|
||||||
meta: { requiresAuth: false },
|
meta: { requiresAuth: false },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/login",
|
path: "/login",
|
||||||
name: "LoginPage",
|
name: "LoginPage",
|
||||||
component: () => import("../views/LoginPage.vue"),
|
component: async (): Promise<unknown> => import("../views/LoginPage.vue"),
|
||||||
meta: { requiresAuth: false },
|
meta: { requiresAuth: false },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -108,7 +108,7 @@ const router = createRouter({
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
router.beforeEach(async (to, from, next) => {
|
router.beforeEach(async (to, _from, next) => {
|
||||||
// Verify if user is logged in before accessing certain routes
|
// Verify if user is logged in before accessing certain routes
|
||||||
if (to.meta.requiresAuth) {
|
if (to.meta.requiresAuth) {
|
||||||
if (!authState.isLoggedIn.value) {
|
if (!authState.isLoggedIn.value) {
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import apiClient from "@/services/api-client.ts";
|
import apiClient from "@/services/api-client.ts";
|
||||||
import type { FrontendAuthConfig } from "@/services/auth/auth.d.ts";
|
import type { FrontendAuthConfig } from "@/services/auth/auth.d.ts";
|
||||||
|
import type {UserManagerSettings} from "oidc-client-ts";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetch the authentication configuration from the backend.
|
* Fetch the authentication configuration from the backend.
|
||||||
*/
|
*/
|
||||||
export async function loadAuthConfig() {
|
export async function loadAuthConfig(): Promise<Record<string, UserManagerSettings>> {
|
||||||
const authConfig = (await apiClient.get<FrontendAuthConfig>("auth/config")).data;
|
const authConfig = (await apiClient.get<FrontendAuthConfig>("auth/config")).data;
|
||||||
return {
|
return {
|
||||||
student: {
|
student: {
|
||||||
|
|
|
@ -49,7 +49,7 @@ const isLoggedIn = computed(() => authState.user !== null);
|
||||||
/**
|
/**
|
||||||
* Redirect the user to the login page where he/she can choose whether to log in as a student or teacher.
|
* Redirect the user to the login page where he/she can choose whether to log in as a student or teacher.
|
||||||
*/
|
*/
|
||||||
async function initiateLogin() {
|
async function initiateLogin(): Promise<void> {
|
||||||
await router.push(loginRoute);
|
await router.push(loginRoute);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,12 +77,12 @@ async function handleLoginCallback(): Promise<void> {
|
||||||
/**
|
/**
|
||||||
* Refresh an expired authorization token.
|
* Refresh an expired authorization token.
|
||||||
*/
|
*/
|
||||||
async function renewToken() {
|
async function renewToken(): Promise<User | null> {
|
||||||
const activeRole = authStorage.getActiveRole();
|
const activeRole = authStorage.getActiveRole();
|
||||||
if (!activeRole) {
|
if (!activeRole) {
|
||||||
console.log("Can't renew the token: Not logged in!");
|
console.log("Can't renew the token: Not logged in!");
|
||||||
await initiateLogin();
|
await initiateLogin();
|
||||||
return;
|
return null;
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
return await (await getUserManagers())[activeRole].signinSilent();
|
return await (await getUserManagers())[activeRole].signinSilent();
|
||||||
|
@ -91,6 +91,7 @@ async function renewToken() {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
await initiateLogin();
|
await initiateLogin();
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -113,7 +114,7 @@ apiClient.interceptors.request.use(
|
||||||
}
|
}
|
||||||
return reqConfig;
|
return reqConfig;
|
||||||
},
|
},
|
||||||
(error) => Promise.reject(error),
|
async (error) => Promise.reject(error),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Registering interceptor to refresh the token when a request failed because it was expired.
|
// Registering interceptor to refresh the token when a request failed because it was expired.
|
||||||
|
@ -121,7 +122,7 @@ apiClient.interceptors.response.use(
|
||||||
(response) => response,
|
(response) => response,
|
||||||
async (error: AxiosError<{ message?: string }>) => {
|
async (error: AxiosError<{ message?: string }>) => {
|
||||||
if (error.response?.status === 401) {
|
if (error.response?.status === 401) {
|
||||||
if (error.response!.data.message === "token_expired") {
|
if (error.response.data.message === "token_expired") {
|
||||||
console.log("Access token expired, trying to refresh...");
|
console.log("Access token expired, trying to refresh...");
|
||||||
await renewToken();
|
await renewToken();
|
||||||
return apiClient(error.config!); // Retry the request
|
return apiClient(error.config!); // Retry the request
|
||||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
* Set the role the user is currently logged in as from the local persistent storage.
|
* Set the role the user is currently logged in as from the local persistent storage.
|
||||||
* This should happen when the user logs in with another account.
|
* This should happen when the user logs in with another account.
|
||||||
*/
|
*/
|
||||||
setActiveRole(role: Role) {
|
setActiveRole(role: Role): void {
|
||||||
localStorage.setItem("activeRole", role);
|
localStorage.setItem("activeRole", role);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -20,7 +20,7 @@ export default {
|
||||||
* Remove the saved current role from the local persistent storage.
|
* Remove the saved current role from the local persistent storage.
|
||||||
* This should happen when the user is logged out.
|
* This should happen when the user is logged out.
|
||||||
*/
|
*/
|
||||||
deleteActiveRole() {
|
deleteActiveRole(): void {
|
||||||
localStorage.removeItem("activeRole");
|
localStorage.removeItem("activeRole");
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
14
frontend/src/services/auth/auth.d.ts
vendored
14
frontend/src/services/auth/auth.d.ts
vendored
|
@ -1,22 +1,22 @@
|
||||||
import { type User, UserManager } from "oidc-client-ts";
|
import { type User, UserManager } from "oidc-client-ts";
|
||||||
|
|
||||||
export type AuthState = {
|
export interface AuthState {
|
||||||
user: User | null;
|
user: User | null;
|
||||||
accessToken: string | null;
|
accessToken: string | null;
|
||||||
activeRole: Role | null;
|
activeRole: Role | null;
|
||||||
};
|
}
|
||||||
|
|
||||||
export type FrontendAuthConfig = {
|
export interface FrontendAuthConfig {
|
||||||
student: FrontendIdpConfig;
|
student: FrontendIdpConfig;
|
||||||
teacher: FrontendIdpConfig;
|
teacher: FrontendIdpConfig;
|
||||||
};
|
}
|
||||||
|
|
||||||
export type FrontendIdpConfig = {
|
export interface FrontendIdpConfig {
|
||||||
authority: string;
|
authority: string;
|
||||||
clientId: string;
|
clientId: string;
|
||||||
scope: string;
|
scope: string;
|
||||||
responseType: string;
|
responseType: string;
|
||||||
};
|
}
|
||||||
|
|
||||||
export type Role = "student" | "teacher";
|
export type Role = "student" | "teacher";
|
||||||
export type UserManagersForRoles = { student: UserManager; teacher: UserManager };
|
export interface UserManagersForRoles { student: UserManager; teacher: UserManager }
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
const testResponse = ref(null);
|
const testResponse = ref(null);
|
||||||
|
|
||||||
async function testAuthenticated() {
|
async function testAuthenticated(): Promise<void> {
|
||||||
testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly");
|
testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -2,15 +2,15 @@
|
||||||
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
|
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
|
||||||
import auth from "@/services/auth/auth-service.ts";
|
import auth from "@/services/auth/auth-service.ts";
|
||||||
|
|
||||||
function loginAsStudent() {
|
function loginAsStudent(): void {
|
||||||
auth.loginAs("student");
|
auth.loginAs("student");
|
||||||
}
|
}
|
||||||
|
|
||||||
function loginAsTeacher() {
|
function loginAsTeacher(): void {
|
||||||
auth.loginAs("teacher");
|
auth.loginAs("teacher");
|
||||||
}
|
}
|
||||||
|
|
||||||
function performLogout() {
|
function performLogout(): void {
|
||||||
auth.logout();
|
auth.logout();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -2,7 +2,6 @@ import { fileURLToPath, URL } from "node:url";
|
||||||
|
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
import vue from "@vitejs/plugin-vue";
|
import vue from "@vitejs/plugin-vue";
|
||||||
import vueDevTools from "vite-plugin-vue-devtools";
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue