When i use refresh button in my browser or hit f5 on keyboard instead of refreshing my page it redirects to home page.
Code
router.js
import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);
import NotFoundComponent from './ponents/NotFoundComponent.vue';
const router = new VueRouter({
mode: "history",
routes: [
{
path: '*',
name: 'notFound',
ponent: NotFoundComponent,
meta: {
breadCrumb: 'Not Found'
}
},
//rest of routes...
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isLoggedIn) {
next({
name: 'login'
})
} else {
next()
}
}
if (to.matched.some(record => record.meta.admin)) {
if (store.getters.loggedUser.type !== 'admin') {
next({
name: 'home'
})
} else {
next()
}
}
next()
});
router.afterEach((to, from) => {
Vue.nextTick(() => {
document.title = to.pageTitle || 'Test App';
});
});
export default router;
For instance if i am in this URL
after refresh i will redirect to
Any idea?
Update
route.js full code
import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);
//admins
import pageHome from './ponents/HomePage.vue';
import Dashboard from './ponents/admin/Dashboard.vue';
import AdminProducts from './ponents/admin/Products/Products.vue';
import AddProducts from './ponents/admin/Products/Add.vue';
import CurrencySettings from './ponents/admin/Settings/Currencies/Currency.vue';
import AddCurrencies from './ponents/admin/Settings/Currencies/Add.vue';
import editCurrencies from './ponents/admin/Settings/Currencies/Edit.vue';
import SlideSettings from './ponents/admin/Settings/Slides/Slide.vue';
import addSlides from './ponents/admin/Settings/Slides/Add.vue';
import editSlides from './ponents/admin/Settings/Slides/Edit.vue';
import categoriesSettings from './ponents/admin/Categories/Categories.vue';
import addCategories from './ponents/admin/Categories/Add.vue';
import editCategories from './ponents/admin/Categories/Edit.vue';
import tagsSettings from './ponents/admin/Tags/Tags.vue';
import addTags from './ponents/admin/Tags/Add.vue';
import editTags from './ponents/admin/Tags/Edit.vue';
import brandsSettings from './ponents/admin/Brands/Brands.vue';
import addBrands from './ponents/admin/Brands/Add.vue';
import editBrands from './ponents/admin/Brands/Edit.vue';
import usersSettings from './ponents/admin/Users/Users.vue';
import addUsers from './ponents/admin/Users/Add.vue';
import editUsers from './ponents/admin/Users/Edit.vue';
import reviewsSettings from './ponents/admin/Reviews/Reviews.vue';
import editReviews from './ponents/admin/Reviews/Edit.vue';
// users
import Register from './ponents/auth/Register.vue';
import Login from './ponents/auth/Login.vue';
import Profile from './ponents/auth/Profile.vue';
import SingleProduct from './ponents/Front/SingleProduct.vue';
import NotFoundComponent from './ponents/NotFoundComponent.vue';
const router = new VueRouter({
mode: "history",
routes: [
{
path: '*',
name: 'notFound',
ponent: NotFoundComponent,
meta: {
breadCrumb: 'Not Found'
}
},
// ADMIN ROUTES
{
path: '/dashboard',
name: 'dashboard',
ponent: Dashboard,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
name: 'dashboard',
breadCrumb: 'Dashboard'
}
},
{
path: '/dashboard/products',
name: 'adminProducts',
ponent: AdminProducts,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Products'
}
},
{
path: '/dashboard/products/add',
name: 'addProducts',
ponent: AddProducts,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Product'
}
},
{
path: '/dashboard/currencies',
name: 'CurrencySettings',
ponent: CurrencySettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Currencies'
}
},
{
path: '/dashboard/currencies/add',
name: 'addCurrencies',
ponent: AddCurrencies,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Currency'
}
},
{
path: '/dashboard/currencies/:id/edit',
name: 'editCurrencies',
ponent: editCurrencies,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Currency'
}
},
{
path: '/dashboard/slides',
name: 'SlideSettings',
ponent: SlideSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Slides'
}
},
{
path: '/dashboard/slides/add',
name: 'addSlides',
ponent: addSlides,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Slide'
}
},
{
path: '/dashboard/slides/:id/edit',
name: 'editSlides',
ponent: editSlides,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Slider'
}
},
{
path: '/dashboard/categories',
name: 'categoriesSettings',
ponent: categoriesSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Categories'
}
},
{
path: '/dashboard/categories/add',
name: 'addCategories',
ponent: addCategories,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Category'
}
},
{
path: '/dashboard/categories/:id/edit',
name: 'editCategories',
ponent: editCategories,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Category'
}
},
{
path: '/dashboard/tags',
name: 'tagsSettings',
ponent: tagsSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Tags'
}
},
{
path: '/dashboard/tags/add',
name: 'addTags',
ponent: addTags,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Tag'
}
},
{
path: '/dashboard/tags/:id/edit',
name: 'editTags',
ponent: editTags,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Tag'
}
},
{
path: '/dashboard/brands',
name: 'brandsSettings',
ponent: brandsSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Brands'
}
},
{
path: '/dashboard/brands/add',
name: 'addBrands',
ponent: addBrands,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Brand'
}
},
{
path: '/dashboard/brands/:id/edit',
name: 'editBrands',
ponent: editBrands,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Brand'
}
},
{
path: '/dashboard/users',
name: 'usersSettings',
ponent: usersSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Users'
}
},
{
path: '/dashboard/users/add',
name: 'addUsers',
ponent: addUsers,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add User'
}
},
{
path: '/dashboard/users/:id/edit',
name: 'editUsers',
ponent: editUsers,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit User'
}
},
{
path: '/dashboard/reviews',
name: 'reviewsSettings',
ponent: reviewsSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Reviews'
}
},
{
path: '/dashboard/reviews/:id/edit',
name: 'editReviews',
ponent: editReviews,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Review'
}
},
// public routes
{
path: "/",
name: 'home',
ponent: pageHome,
meta: {
breadCrumb: 'Home Page'
}
},
{
path: "/products/:slug",
name: 'SingleProduct',
ponent: SingleProduct,
meta: {
breadCrumb: 'Product'
}
},
// auth
{
path: '/profile',
name: 'profile',
ponent: Profile,
meta: {
requiresAuth: true,
breadCrumb: 'Profile'
}
},
{
path: '/register',
name: 'register',
ponent: Register,
meta: {
breadCrumb: 'Register'
}
},
{
path: '/login',
name: 'login',
ponent: Login,
meta: {
breadCrumb: 'Login'
}
}
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isLoggedIn) {
next({
name: 'login'
})
} else {
next()
}
}
if (to.matched.some(record => record.meta.admin)) {
if (store.getters.loggedUser.type !== 'admin') {
next({
name: 'home'
})
} else {
next()
}
}
next()
});
router.afterEach((to, from) => {
Vue.nextTick(() => {
document.title = to.pageTitle || 'Test App';
});
});
export default router;
When i use refresh button in my browser or hit f5 on keyboard instead of refreshing my page it redirects to home page.
Code
router.js
import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);
import NotFoundComponent from './ponents/NotFoundComponent.vue';
const router = new VueRouter({
mode: "history",
routes: [
{
path: '*',
name: 'notFound',
ponent: NotFoundComponent,
meta: {
breadCrumb: 'Not Found'
}
},
//rest of routes...
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isLoggedIn) {
next({
name: 'login'
})
} else {
next()
}
}
if (to.matched.some(record => record.meta.admin)) {
if (store.getters.loggedUser.type !== 'admin') {
next({
name: 'home'
})
} else {
next()
}
}
next()
});
router.afterEach((to, from) => {
Vue.nextTick(() => {
document.title = to.pageTitle || 'Test App';
});
});
export default router;
For instance if i am in this URL
https://example./products
after refresh i will redirect to
https://example.
Any idea?
Update
route.js full code
import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);
//admins
import pageHome from './ponents/HomePage.vue';
import Dashboard from './ponents/admin/Dashboard.vue';
import AdminProducts from './ponents/admin/Products/Products.vue';
import AddProducts from './ponents/admin/Products/Add.vue';
import CurrencySettings from './ponents/admin/Settings/Currencies/Currency.vue';
import AddCurrencies from './ponents/admin/Settings/Currencies/Add.vue';
import editCurrencies from './ponents/admin/Settings/Currencies/Edit.vue';
import SlideSettings from './ponents/admin/Settings/Slides/Slide.vue';
import addSlides from './ponents/admin/Settings/Slides/Add.vue';
import editSlides from './ponents/admin/Settings/Slides/Edit.vue';
import categoriesSettings from './ponents/admin/Categories/Categories.vue';
import addCategories from './ponents/admin/Categories/Add.vue';
import editCategories from './ponents/admin/Categories/Edit.vue';
import tagsSettings from './ponents/admin/Tags/Tags.vue';
import addTags from './ponents/admin/Tags/Add.vue';
import editTags from './ponents/admin/Tags/Edit.vue';
import brandsSettings from './ponents/admin/Brands/Brands.vue';
import addBrands from './ponents/admin/Brands/Add.vue';
import editBrands from './ponents/admin/Brands/Edit.vue';
import usersSettings from './ponents/admin/Users/Users.vue';
import addUsers from './ponents/admin/Users/Add.vue';
import editUsers from './ponents/admin/Users/Edit.vue';
import reviewsSettings from './ponents/admin/Reviews/Reviews.vue';
import editReviews from './ponents/admin/Reviews/Edit.vue';
// users
import Register from './ponents/auth/Register.vue';
import Login from './ponents/auth/Login.vue';
import Profile from './ponents/auth/Profile.vue';
import SingleProduct from './ponents/Front/SingleProduct.vue';
import NotFoundComponent from './ponents/NotFoundComponent.vue';
const router = new VueRouter({
mode: "history",
routes: [
{
path: '*',
name: 'notFound',
ponent: NotFoundComponent,
meta: {
breadCrumb: 'Not Found'
}
},
// ADMIN ROUTES
{
path: '/dashboard',
name: 'dashboard',
ponent: Dashboard,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
name: 'dashboard',
breadCrumb: 'Dashboard'
}
},
{
path: '/dashboard/products',
name: 'adminProducts',
ponent: AdminProducts,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Products'
}
},
{
path: '/dashboard/products/add',
name: 'addProducts',
ponent: AddProducts,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Product'
}
},
{
path: '/dashboard/currencies',
name: 'CurrencySettings',
ponent: CurrencySettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Currencies'
}
},
{
path: '/dashboard/currencies/add',
name: 'addCurrencies',
ponent: AddCurrencies,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Currency'
}
},
{
path: '/dashboard/currencies/:id/edit',
name: 'editCurrencies',
ponent: editCurrencies,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Currency'
}
},
{
path: '/dashboard/slides',
name: 'SlideSettings',
ponent: SlideSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Slides'
}
},
{
path: '/dashboard/slides/add',
name: 'addSlides',
ponent: addSlides,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Slide'
}
},
{
path: '/dashboard/slides/:id/edit',
name: 'editSlides',
ponent: editSlides,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Slider'
}
},
{
path: '/dashboard/categories',
name: 'categoriesSettings',
ponent: categoriesSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Categories'
}
},
{
path: '/dashboard/categories/add',
name: 'addCategories',
ponent: addCategories,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Category'
}
},
{
path: '/dashboard/categories/:id/edit',
name: 'editCategories',
ponent: editCategories,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Category'
}
},
{
path: '/dashboard/tags',
name: 'tagsSettings',
ponent: tagsSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Tags'
}
},
{
path: '/dashboard/tags/add',
name: 'addTags',
ponent: addTags,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Tag'
}
},
{
path: '/dashboard/tags/:id/edit',
name: 'editTags',
ponent: editTags,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Tag'
}
},
{
path: '/dashboard/brands',
name: 'brandsSettings',
ponent: brandsSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Brands'
}
},
{
path: '/dashboard/brands/add',
name: 'addBrands',
ponent: addBrands,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add Brand'
}
},
{
path: '/dashboard/brands/:id/edit',
name: 'editBrands',
ponent: editBrands,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Brand'
}
},
{
path: '/dashboard/users',
name: 'usersSettings',
ponent: usersSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Users'
}
},
{
path: '/dashboard/users/add',
name: 'addUsers',
ponent: addUsers,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Add User'
}
},
{
path: '/dashboard/users/:id/edit',
name: 'editUsers',
ponent: editUsers,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit User'
}
},
{
path: '/dashboard/reviews',
name: 'reviewsSettings',
ponent: reviewsSettings,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Reviews'
}
},
{
path: '/dashboard/reviews/:id/edit',
name: 'editReviews',
ponent: editReviews,
meta: {
requiresAuth: true,
admin: true,
layout: 'admin',
breadCrumb: 'Edit Review'
}
},
// public routes
{
path: "/",
name: 'home',
ponent: pageHome,
meta: {
breadCrumb: 'Home Page'
}
},
{
path: "/products/:slug",
name: 'SingleProduct',
ponent: SingleProduct,
meta: {
breadCrumb: 'Product'
}
},
// auth
{
path: '/profile',
name: 'profile',
ponent: Profile,
meta: {
requiresAuth: true,
breadCrumb: 'Profile'
}
},
{
path: '/register',
name: 'register',
ponent: Register,
meta: {
breadCrumb: 'Register'
}
},
{
path: '/login',
name: 'login',
ponent: Login,
meta: {
breadCrumb: 'Login'
}
}
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isLoggedIn) {
next({
name: 'login'
})
} else {
next()
}
}
if (to.matched.some(record => record.meta.admin)) {
if (store.getters.loggedUser.type !== 'admin') {
next({
name: 'home'
})
} else {
next()
}
}
next()
});
router.afterEach((to, from) => {
Vue.nextTick(() => {
document.title = to.pageTitle || 'Test App';
});
});
export default router;
- Can you show the whole routes? The order of them may have something to do with it. – Adam Orłowski Commented Feb 23, 2020 at 10:12
- @AdamOrlov you mean i share whole route.js file? – mafortis Commented Feb 23, 2020 at 10:16
-
Thanks I will take a look. Have you checked vue-devtools? When you are beeing redirect are you sure you are
loggedUser === 'admin'and yourbeforeEachif-guard doesn't fire? – Adam Orłowski Commented Feb 23, 2020 at 10:19 - i am sure about being admin about beforeEach part not exactly sure what you mean or how to check it – mafortis Commented Feb 23, 2020 at 10:21
-
2
my guess is you loose your store state on refresh page. Do you use tool like vuex-persistedstate ? If not, you always fall in this condition =>
store.getters.loggedUser.type !== 'admin'– Sovalina Commented Feb 23, 2020 at 10:39
1 Answer
Reset to default 4Solved
working code
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!store.getters.isLoggedIn) {
next({
name: 'login'
})
} else {
next()
}
}
if (to.matched.some(record => record.meta.requiresAdmin)) {
// this route requires auth, check if logged in
// if not, redirect to home page.
if (!store.getters.loggedUser.type == 'admin') {
next({
name: 'home'
})
} else {
next()
}
}
else {
next() // make sure to always call next()!
}
})
Hope it help others.