source

특정 페이지에서만 Vue Router 액세스 경로

manycodes 2022. 11. 16. 21:28
반응형

특정 페이지에서만 Vue Router 액세스 경로

사용자가 처음 로그인한 후 [Create Profile]페이지로 리다이렉트 하면 모든 프로파일 정보를 입력합니다.그 후, 유저가 브라우저에 URL 를 입력하는 등, 이 사이트에 액세스 할 수 없게 합니다(예: www.myproject.com/createProfile)).

로그인 페이지로부터의 리다이렉션만이 Create Profile 페이지에 액세스 할 수 있도록 하려면 어떻게 해야 합니까?즉, 사용자가 URL을 수동으로 입력하면 404 페이지로 리디렉션됩니다.

현재 Create Profile 루트는 다음과 같습니다.

{
  path: '/createprofile',
  name: 'CreateProfile',
  component: CreateProfile,
  beforeEnter: (to, from, next) => {
    if (store.getters.getUserStatus == true) {
      next()
    } else {
      next({ name: 'Login' })
    }
  }
}

감사합니다!!

확인하실 수 있습니다.from의 루트 오브젝트beforeEnter네비게이션 가드를 사용하여 이전 루트 위치를 테스트합니다.

예를 들어, 다음과 같이 합니다.from.name속성은Login(이것만)true원하는 리다이렉트가 있을 때. (또한 당신이 원하는 리다이렉트를 제공하지 않는 경우)<router-link>부터Login):

beforeEnter: (to, from, next) => {
  const isRedirected = from.name === 'Login';
  if (isRedirected && store.getters.getUserStatus == true) {
    next()
  } else {
    next({ name: 'Login' })
  }
}

언급URL : https://stackoverflow.com/questions/66262642/vue-router-access-route-only-from-certain-page

반응형