Handle login redirect

web/src/main.ts

@@ -6,6 +6,7 @@ import { createPinia } from 'pinia'
 import { useBudgetsStore } from './stores/budget';
 import { useAccountStore } from './stores/budget-account'
 import PiniaLogger from './pinia-logger'
+import { useSessionStore } from './stores/session'
 
 const app = createApp(App)
 app.use(router)
@@ -26,3 +27,46 @@ router.beforeEach(async (to, from, next) => {
   await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid));
   next();
 })
+
+router.beforeEach((to, from, next) => {
+  const sessionStore = useSessionStore();
+  const token = sessionStore.Session?.Token;
+  let loggedIn = false;
+
+  if (token != null) {
+    const jwt = parseJwt(token);
+    if (jwt.exp > Date.now() / 1000)
+      loggedIn = true;
+  }
+
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (!loggedIn) {
+      next({ path: '/login' });
+    } else {
+      next();
+    }
+
+  } else if (to.matched.some(record => record.meta.hideForAuth)) {
+    if (loggedIn) {
+      next({ path: '/dashboard' });
+    } else {
+      next();
+    }
+  } else {
+    next();
+  }
+});
+
+function parseJwt(token: string) {
+  var base64Url = token.split('.')[1];
+  var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  var jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
+    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+  }).join(''));
+
+  return JSON.parse(jsonPayload);
+};
+
+
+1646426130
+1646512855755

web/src/router/index.ts

@@ -10,15 +10,16 @@ import BudgetSidebar from '../pages/BudgetSidebar.vue';
 
 const routes = [
   { path: "/", name: "Index", component: Index },
-  { path: "/dashboard", name: "Dashboard", component: Dashboard },
+  { path: "/dashboard", name: "Dashboard", component: Dashboard, meta: { requiresAuth: true } },
-  { path: "/login", name: "Login", component: Login },
+  { path: "/login", name: "Login", component: Login, meta: { hideForAuth: true } },
-  { path: "/register", name: "Register", component: Register },
+  { path: "/register", name: "Register", component: Register, meta: { hideForAuth: true } },
   { path: "/budget/:budgetid/budgeting", name: "Budget", redirect: (to : RouteLocationNormalized) => 
-    '/budget/' + to.params.budgetid + '/budgeting/' + new Date().getFullYear() + '/' + new Date().getMonth() 
+    '/budget/' + to.params.budgetid + '/budgeting/' + new Date().getFullYear() + '/' + new Date().getMonth(), 
+    meta: { requiresAuth: true } 
   },
-  { path: "/budget/:budgetid/budgeting/:year/:month", name: "Budget with date", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
+  { path: "/budget/:budgetid/budgeting/:year/:month", name: "Budget with date", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } },
-  { path: "/budget/:budgetid/Settings", name: "Budget Settings", components: { default: Settings, sidebar: BudgetSidebar }, props: true },
+  { path: "/budget/:budgetid/Settings", name: "Budget Settings", components: { default: Settings, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } },
-  { path: "/budget/:budgetid/account/:accountid", name: "Account", components: { default: Account, sidebar: BudgetSidebar }, props: true },
+  { path: "/budget/:budgetid/account/:accountid", name: "Account", components: { default: Account, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } },
 ]
 
 const router = createRouter({