programing

리프레시 시 Vuejs 루트 리다이렉트

copyandpastes 2022. 7. 13. 21:14
반응형

리프레시 시 Vuejs 루트 리다이렉트

브라우저의 새로 고침 버튼을 사용하거나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

리프레시 후 로 리다이렉트 합니다.

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;

해결된

작업 코드

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

다른 사람들에게 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/60361064/vuejs-route-redirect-on-refresh

반응형