50 lines
1.5 KiB
TypeScript
50 lines
1.5 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 UsersList from "../pages/UsersList.vue";
|
|
import UserForm from "../pages/UserForm.vue";
|
|
import index from "../pages/index.vue";
|
|
|
|
// link path to the page component
|
|
const routes = [
|
|
{ path: "/", component: index },
|
|
{ path: "/login", component: LoginForm },
|
|
{ path: "/register", component: RegisterForm },
|
|
{ path: "/users", component: UsersList },
|
|
{ path: "/user/new", component: UserForm, meta: { requiresAuth: true } },
|
|
{ path: "/user/:id", component: UserForm, 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 = localStorage.getItem("token");
|
|
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();
|
|
}
|
|
// TODO: if they have a token, but invalid, it will still send them to the page (the api will catch non-authorized though)
|
|
// maybe have a "validate token" from the api and refresh it if valid
|
|
/*
|
|
} else {
|
|
bool authorizedUser = authApi.refreshToken(token);
|
|
if(authorizedUser) {
|
|
next();
|
|
} else {
|
|
next("/login");
|
|
}
|
|
}
|
|
*/
|
|
});
|
|
|
|
export default router;
|