Vue Router에서 다중 레벨 리디렉션을 구현하는 방법-View.js-php.cn

Vue Router에서 다중 레벨 리디렉션을 구현하는 방법

WBOY

풀어 주다： 2023-09-15 10:57:52

원래의

1284명이 탐색했습니다.

如何在 Vue Router 中实现多级重定向

Vue Router에서 다중 레벨 리디렉션을 구현하려면 특정 코드 예제가 필요합니다.

Vue Router는 프런트 엔드 라우팅 기능을 구현하는 데 사용되는 Vue.js의 공식 라우팅 관리자입니다. 실제 프로젝트에서는 다단계 리디렉션이 필요한 상황, 즉 사용자가 경로에 액세스하면 조건에 따라 자동으로 다른 경로로 점프하는 상황이 자주 발생합니다. 이 기사에서는 Vue Router에서 다중 레벨 리디렉션을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

Vue Router에서 다중 레벨 리디렉션을 구현하려면 경로의 메타 필드를 구성하면 됩니다. 메타 필드는 추가 정보를 포함하는 객체로, 다중 레벨 리디렉션을 구현하기 위해 해당 필드를 사용자 정의할 수 있습니다.

먼저 조건에 따라 리디렉션할 점프 기능을 정의해야 합니다. 우리가 구현하려는 기능은 사용자가 로그인하지 않은 경우 자동으로 로그인 페이지로 이동하는 것이고, 사용자가 로그인했지만 페이지에 액세스할 권한이 없는 경우 자동으로 승인되지 않은 페이지로 이동하는 것이라고 가정합니다.

// 跳转函数
function redirect(to) {
  if (!user.isAuthenticated) {
    // 没有登录，跳转到登录页
    return { path: '/login', query: { redirect: to.fullPath } }
  } else if (!user.hasPermission(to.meta.permission)) {
    // 没有权限，跳转到无权限页面
    return { path: '/unauthorized' }
  } else {
    // 有权限，继续访问原页面
    return { next: true }
  }
}

로그인 후 복사

위 코드에서 user.isAuthenticated는 사용자가 로그인했는지 여부를 나타내고, user.hasPermission(permission)은 사용자에게 특정 권한이 있는지 여부를 나타냅니다.

다음으로 라우팅 구성에서 이 점프 기능을 사용해야 합니다. 홈 페이지, 로그인 페이지, 권한 없음 페이지의 세 가지 경로가 있다고 가정합니다.

// 路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {}
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {}
  },
  {
    path: '/unauthorized',
    name: 'unauthorized',
    component: Unauthorized,
    meta: {}
  }
]

로그인 후 복사

현재 라우팅 구성의 메타 필드가 비어 있습니다. 구체적인 상황에 따라 구성해야 합니다.

먼저 사용자가 로그인해야 하는지 여부를 결정하기 위해 홈페이지 경로의 메타 필드를 구성해야 합니다.

// 路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { requiresAuth: true }
  },
  // ...
]

로그인 후 복사

위 코드에서는 홈페이지의 메타 필드에 requireAuth 필드를 추가했습니다. 값은 true이며, 이는 사용자가 홈페이지에 액세스하려면 로그인해야 함을 나타냅니다.

다음으로 사용자에게 권한이 있는지 확인하기 위해 권한이 필요한 경로의 메타 필드를 구성해야 합니다.

// 路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: { requiresAuth: true, permission: 'admin' }
  },
  // ...
]

로그인 후 복사

위 코드에서는 권한이 필요한 경로의 메타 필드에 권한 필드를 추가했으며 값은 권한 이름입니다(여기서는 admin이 필수 권한이라고 가정).

마지막으로 경로의 beforeEach 후크에서 점프 기능을 사용하여 메타 필드를 기반으로 리디렉션해야 합니다.

// 路由配置
const router = new VueRouter({
  routes
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const redirectTo = redirect(to)
  if (redirectTo.path) {
    // 跳转到指定页面
    next(redirectTo)
  } else {
    // 继续访问原页面
    next()
  }
})

로그인 후 복사

위 코드에서는 beforeEach 후크의 점프 함수를 사용하여 리디렉션이 필요한지 여부를 결정합니다. 점프 함수가 경로 필드가 있는 객체를 반환하는 경우 지정된 페이지로 리디렉션해야 한다는 의미입니다. 그렇지 않으면 리디렉션이 없으며 계속해서 원래 페이지에 액세스하게 됩니다.

이 시점에서 우리는 Vue Router에서 다중 레벨 리디렉션을 구현하는 전체 프로세스를 완료했습니다. 다양한 조건에서 자동 점프를 달성하려면 특정 조건에 따라 구성하십시오.

요약하면 Vue Router에서 다중 레벨 리디렉션을 구현하는 단계는 다음과 같습니다.