Vuejs перенаправление маршрута при обновлении - PullRequest
Новая
       31

Vuejs перенаправление маршрута при обновлении

0 голосов
/ 23 февраля 2020

Когда я использую кнопку refre sh в моем браузере или нажимаю f5 на клавиатуре вместо обновления моей страницы, он перенаправляет на домашнюю страницу.

Код

router.js

import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);

import NotFoundComponent from './components/NotFoundComponent.vue';

const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: '*',
            name: 'notFound',
            component: 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;

Например, если я нахожусь в этом URL 

https://example.com/products

после refre sh я перенаправлю на 

https://example.com

Есть идеи?

Обновление

route.js полный код 

import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);

//admins
import pageHome from './components/HomePage.vue';
import Dashboard from './components/admin/Dashboard.vue';
import AdminProducts from './components/admin/Products/Products.vue';
import AddProducts from './components/admin/Products/Add.vue';
import CurrencySettings from './components/admin/Settings/Currencies/Currency.vue';
import AddCurrencies from './components/admin/Settings/Currencies/Add.vue';
import editCurrencies from './components/admin/Settings/Currencies/Edit.vue';
import SlideSettings from './components/admin/Settings/Slides/Slide.vue';
import addSlides from './components/admin/Settings/Slides/Add.vue';
import editSlides from './components/admin/Settings/Slides/Edit.vue';

import categoriesSettings from './components/admin/Categories/Categories.vue';
import addCategories from './components/admin/Categories/Add.vue';
import editCategories from './components/admin/Categories/Edit.vue';

import tagsSettings from './components/admin/Tags/Tags.vue';
import addTags from './components/admin/Tags/Add.vue';
import editTags from './components/admin/Tags/Edit.vue';


import brandsSettings from './components/admin/Brands/Brands.vue';
import addBrands from './components/admin/Brands/Add.vue';
import editBrands from './components/admin/Brands/Edit.vue';


import usersSettings from './components/admin/Users/Users.vue';
import addUsers from './components/admin/Users/Add.vue';
import editUsers from './components/admin/Users/Edit.vue';


import reviewsSettings from './components/admin/Reviews/Reviews.vue';
import editReviews from './components/admin/Reviews/Edit.vue';

// users
import Register from './components/auth/Register.vue';
import Login from './components/auth/Login.vue';
import Profile from './components/auth/Profile.vue';
import SingleProduct from './components/Front/SingleProduct.vue';

import NotFoundComponent from './components/NotFoundComponent.vue';

const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: '*',
            name: 'notFound',
            component: NotFoundComponent,
            meta: {
                breadCrumb: 'Not Found'
            }
        },
        // ADMIN ROUTES
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                name: 'dashboard',
                breadCrumb: 'Dashboard'
            }
        },
        {
            path: '/dashboard/products',
            name: 'adminProducts',
            component: AdminProducts,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Products'
            }
        },
        {
            path: '/dashboard/products/add',
            name: 'addProducts',
            component: AddProducts,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Add Product'
            }
        },
        {
            path: '/dashboard/currencies',
            name: 'CurrencySettings',
            component: CurrencySettings,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Currencies'
            }
        },
        {
            path: '/dashboard/currencies/add',
            name: 'addCurrencies',
            component: AddCurrencies,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Add Currency'
            }
        },
        {
            path: '/dashboard/currencies/:id/edit',
            name: 'editCurrencies',
            component: editCurrencies,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Edit Currency'
            }
        },
        {
            path: '/dashboard/slides',
            name: 'SlideSettings',
            component: SlideSettings,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Slides'
            }
        },
        {
            path: '/dashboard/slides/add',
            name: 'addSlides',
            component: addSlides,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Add Slide'
            }
        },
        {
            path: '/dashboard/slides/:id/edit',
            name: 'editSlides',
            component: editSlides,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Edit Slider'
            }
        },
        {
            path: '/dashboard/categories',
            name: 'categoriesSettings',
            component: categoriesSettings,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Categories'
            }
        },
        {
            path: '/dashboard/categories/add',
            name: 'addCategories',
            component: addCategories,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Add Category'
            }
        },
        {
            path: '/dashboard/categories/:id/edit',
            name: 'editCategories',
            component: editCategories,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Edit Category'
            }
        },
        {
            path: '/dashboard/tags',
            name: 'tagsSettings',
            component: tagsSettings,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Tags'
            }
        },
        {
            path: '/dashboard/tags/add',
            name: 'addTags',
            component: addTags,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Add Tag'
            }
        },
        {
            path: '/dashboard/tags/:id/edit',
            name: 'editTags',
            component: editTags,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Edit Tag'
            }
        },
        {
            path: '/dashboard/brands',
            name: 'brandsSettings',
            component: brandsSettings,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Brands'
            }
        },
        {
            path: '/dashboard/brands/add',
            name: 'addBrands',
            component: addBrands,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Add Brand'
            }
        },
        {
            path: '/dashboard/brands/:id/edit',
            name: 'editBrands',
            component: editBrands,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Edit Brand'
            }
        },
        {
            path: '/dashboard/users',
            name: 'usersSettings',
            component: usersSettings,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Users'
            }
        },
        {
            path: '/dashboard/users/add',
            name: 'addUsers',
            component: addUsers,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Add User'
            }
        },
        {
            path: '/dashboard/users/:id/edit',
            name: 'editUsers',
            component: editUsers,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Edit User'
            }
        },
        {
            path: '/dashboard/reviews',
            name: 'reviewsSettings',
            component: reviewsSettings,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Reviews'
            }
        },
        {
            path: '/dashboard/reviews/:id/edit',
            name: 'editReviews',
            component: editReviews,
            meta: {
                requiresAuth: true,
                admin: true,
                layout: 'admin',
                breadCrumb: 'Edit Review'
            }
        },
        // public routes
        {
            path: "/",
            name: 'home',
            component: pageHome,
            meta: {
                breadCrumb: 'Home Page'
            }
        },
        {
            path: "/products/:slug",
            name: 'SingleProduct',
            component: SingleProduct,
            meta: {
                breadCrumb: 'Product'
            }
        },
        // auth
        {
            path: '/profile',
            name: 'profile',
            component: Profile,
            meta: {
                requiresAuth: true,
                breadCrumb: 'Profile'
            }
        },
        {
            path: '/register',
            name: 'register',
            component: Register,
            meta: {
                breadCrumb: 'Register'
            }
        },
        {
            path: '/login',
            name: 'login',
            component: 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;

1 Ответ

0 голосов
/ 29 февраля 2020

Решено

Рабочий код 

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()!
    }
})

Надеюсь, что это поможет другим.

...