vue js protected routes
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import RegisterView from '../views/RegisterView.vue'
import LoginView from '../views/LoginView.vue'
import MyPagesView from '../views/MyPagesView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
meta:{
isAuth: false
}
},
{
path: '/register',
name: 'register',
component: RegisterView,
meta:{
isAuth: false
}
},
{
path: '/login',
name: 'login',
component: LoginView,
meta:{
isAuth: false
}
},
{
path: '/pages',
name: 'pages',
component: MyPagesView,
meta:{
isAuth: true
}
}
]
})
router.beforeEach(async (to, from, next) => {
if (to.matched.some(record => record.meta.isAuth)) {
// bearer token valid
let token = localStorage.getItem("bearer_token");
if (token) {
try {
const response = await fetch("http://localhost:8000/api/user", {
method: "GET",
headers: {
"Authorization": "Bearer " + token,
"Accept": "application/json"
}
});
if (response.ok) {
const data = await response.json();
let user = data.id;
if (user) {
console.log("User found, proceed to the authenticated route.");
next();
} else {
console.error("User not found, redirecting to login.");
next('/login');
}
} else {
console.error("Response not OK, redirecting to login.");
next('/login');
}
} catch (error) {
console.error("Error occurred, redirecting to login:", error);
next('/login');
}
} else {
console.error("No token found, redirecting to login.");
next('/login');
}
} else {
// For routes that don't require authentication
next();
}
});
export default router
