기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Vue.js와 같은 SPA(단일 페이지 애플리케이션) 프레임워크에서 경로 가드는 경로에 대한 액세스를 제어할 수 있는 매우 유용한 기능입니다. Vue.js는 Vue Router를 공식 경로 관리자로 사용합니다. 라우팅 가드는 크게 글로벌 가드와 구성 요소 내 가드로 구분됩니다.

다음은 특정 경로에 공개적으로 액세스할 수 있도록 경로 가드를 설정하는 방법의 예입니다.

1. 글로벌 프론트 가드: Vue Router 구성에서 다음을 사용할 수 있습니다. beforeEach 이 메소드는 사용자가 로그인했는지 확인하고 로그인 상태에 따라 사용자를 리디렉션하는 전역 프론트 가드를 설정합니다.

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import Dashboard from '../components/Dashboard.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true // 标记需要认证的路由
      }
    }
    // 其他路由...
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) =
                                   

                    上一篇
                    下一篇