44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
|
|
// the router creates front-end endpoints and serves pages to them
|
|
|
|
import { createRouter, createWebHistory } from "vue-router";
|
|
import LoginForm from "../pages/LoginForm.vue";
|
|
import RegisterForm from "../pages/RegisterForm.vue";
|
|
import ItemsList from "../pages/ItemsList.vue";
|
|
import ItemForm from "../pages/ItemForm.vue";
|
|
import UsersList from "../pages/UsersList.vue";
|
|
import index from "../pages/index.vue";
|
|
|
|
import { authStorage } from "../api/axios.ts"
|
|
|
|
// link path to the page component
|
|
const routes = [
|
|
{ path: "/", component: index },
|
|
{ path: "/login", component: LoginForm },
|
|
{ path: "/register", component: RegisterForm },
|
|
{ path: "/items", component: ItemsList, meta: { requiresAuth: true } },
|
|
{ path: "/item/new", component: ItemForm, meta: { requiresAuth: true } },
|
|
{ path: "/item/:id", component: ItemForm, meta: { requiresAuth: true } },
|
|
{ path: "/users", component: UsersList, meta: { requiresAuth: true } }
|
|
]; // I really like this
|
|
|
|
const router = createRouter({
|
|
history: createWebHistory(import.meta.env.BASE_URL),
|
|
routes: routes,
|
|
});
|
|
|
|
// intercept before routing
|
|
router.beforeEach((to, from, next) => {
|
|
|
|
const token: string | null = authStorage.getAccessToken();
|
|
if(to.meta.requiresAuth && !token) { // if the page requires use to be signed in, they must have at least a token set
|
|
next("/login");
|
|
} else {
|
|
next();
|
|
}
|
|
|
|
});
|
|
// if the api responds unauthorized (401) then it also will auto-redirect to the login page
|
|
|
|
export default router;
|