Skip to content
Snippets Groups Projects
Commit 9771a0ab authored by Zara Mudassar's avatar Zara Mudassar
Browse files

Function for guarding navigation routes added.

parent 92e36b15
Branches
No related tags found
1 merge request!22Vue route guard
Pipeline #176395 passed
...@@ -4,33 +4,53 @@ import HomeView from "../views/HomeView.vue"; ...@@ -4,33 +4,53 @@ import HomeView from "../views/HomeView.vue";
import LoginView from "../views/LoginView.vue"; import LoginView from "../views/LoginView.vue";
import NewPasswordView from "../views/NewPasswordView"; import NewPasswordView from "../views/NewPasswordView";
/**
* Guards routes. If token is null, no user is logged in and only the
* login page and the register page will be accessible.
*
* Legg denne metoden i login component for å nullstille token, har ikke logg ut metode ennå
* så må nullstilles på denne måten.
* beforeMount() {
console.log("Token: " + this.$store.state.user.token);
this.$store.commit("logout");
console.log("Token etter: " + this.$store.state.user.token);
}
*
*/
function guardRoute(to, from, next) {
var isAuthenticated = false;
if (store.state.user.token != null) isAuthenticated = true;
else isAuthenticated = false;
if (isAuthenticated) {
next(); // allow to enter route
} else {
next("/login"); // go to '/login';
}
}
const routes = [ const routes = [
{ {
path: "/", //Endre før push path: "/", //Endre før push
name: "home", name: "home",
beforeEnter: guardRoute,
component: HomeView, component: HomeView,
}, },
{ {
path: "/about", path: "/about",
name: "about", name: "about",
beforeEnter: guardRoute,
component: () => import("../views/AboutView.vue"), component: () => import("../views/AboutView.vue"),
}, },
{ {
path: "/profile/:id", path: "/profile/:id",
name: "profile", name: "profile",
component: () => import("../views/ProfileView.vue"), component: () => import("../views/ProfileView.vue"),
beforeEnter: () => { beforeEnter: guardRoute,
if (store.state.user.token == null) router.push("login");
},
}, },
{ {
path: "/register", path: "/register",
name: "register", name: "register",
// route level code-splitting component: () => import("../views/RegisterView.vue"),
// this generates a separate chunk (register.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "register" */ "../views/RegisterView.vue"),
}, },
{ {
path: "/login", path: "/login",
...@@ -41,21 +61,25 @@ const routes = [ ...@@ -41,21 +61,25 @@ const routes = [
path: "/newPassword", path: "/newPassword",
name: "newPassword", name: "newPassword",
component: NewPasswordView, component: NewPasswordView,
beforeEnter: guardRoute,
}, },
{ {
path: "/searchItemList", path: "/searchItemList",
name: "searchItemList", name: "searchItemList",
component: () => import("../views/SearchItemListView.vue"), component: () => import("../views/SearchItemListView.vue"),
beforeEnter: guardRoute,
}, },
{ {
path: "/createNewGroup", path: "/createNewGroup",
name: "createNewGroup", name: "createNewGroup",
component: () => import("../views/CreateNewGroupView.vue"), component: () => import("../views/CreateNewGroupView.vue"),
beforeEnter: guardRoute,
}, },
{ {
path: "/addNewItem", path: "/addNewItem",
name: "addNewItem", name: "addNewItem",
component: () => import("../views/AddNewItemView.vue"), component: () => import("../views/AddNewItemView.vue"),
beforeEnter: guardRoute,
}, },
]; ];
... ...
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment